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>
This commit is contained in:
parent
16bfb238c1
commit
c3a695d70c
@ -88,3 +88,5 @@
|
|||||||
| 2026-07-11 | 모바일 트랙 하네스 신설(kintex-mobile-dev + kintex-mobile-orchestrator, WISE 모바일 레퍼런스·Stitch 디자인 경유·G3 EAS 게이트) + 웹 WISE 기능 레퍼런스 강화(kintex-frontend-dev·impl-orchestrator) |
|
| 2026-07-11 | 모바일 트랙 하네스 신설(kintex-mobile-dev + kintex-mobile-orchestrator, WISE 모바일 레퍼런스·Stitch 디자인 경유·G3 EAS 게이트) + 웹 WISE 기능 레퍼런스 강화(kintex-frontend-dev·impl-orchestrator) |
|
||||||
| 2026-07-12 | **제안서.pptx 완성**(나라장터 표준 7대장·97슬라이드·RTM 142/142 QA 승인·화면갤러리 19시안) + 산출물 7종 전체 완성(개발계획서·지침서3·프로그램사양서·DA·사업수행계획서). PLANNING v3.1(계정통합·앱 2타깃)·design v2.1(84화면)·백로그 Phase F. Stitch 신규 24/64 확보(웹코어 트랙 진행·실패 12건은 서비스 저하 — 재시도 예약). 재생성: deliverables/제안서/_gen/build_deck.py |
|
| 2026-07-12 | **제안서.pptx 완성**(나라장터 표준 7대장·97슬라이드·RTM 142/142 QA 승인·화면갤러리 19시안) + 산출물 7종 전체 완성(개발계획서·지침서3·프로그램사양서·DA·사업수행계획서). PLANNING v3.1(계정통합·앱 2타깃)·design v2.1(84화면)·백로그 Phase F. Stitch 신규 24/64 확보(웹코어 트랙 진행·실패 12건은 서비스 저하 — 재시도 예약). 재생성: deliverables/제안서/_gen/build_deck.py |
|
||||||
| 2026-07-12 | **Stitch 잔여 39화면 미확보 — 서비스 저하로 보류.** 확보 25/64(모바일 M4~M14·관리자 A1~A4/A7/A10·공개 P8·웹코어 18~21/24/28/31). 잔여: 웹코어 22/23/25~27/29/30/32~51(27)·관리자 A5/A6/A8/A9(4)·공개 P1~P7(7)·모바일 M15(1). generate 타임아웃 지속+list_screens 스테일(구 27건 고정). **회복 후 재실행 절차 = `_workspace/stitch_gen/harvest_report.md`**(수확 패스→재생성, 연속 3타임아웃 시 중단 규칙). Stitch 웹 UI(프로젝트 9385904003821333054) 육안 확인 권장. 부수: 로그인 슬라이드 CMS·RFP·보고서 4종 커밋(1de3b9b) |
|
| 2026-07-12 | **Stitch 잔여 39화면 미확보 — 서비스 저하로 보류.** 확보 25/64(모바일 M4~M14·관리자 A1~A4/A7/A10·공개 P8·웹코어 18~21/24/28/31). 잔여: 웹코어 22/23/25~27/29/30/32~51(27)·관리자 A5/A6/A8/A9(4)·공개 P1~P7(7)·모바일 M15(1). generate 타임아웃 지속+list_screens 스테일(구 27건 고정). **회복 후 재실행 절차 = `_workspace/stitch_gen/harvest_report.md`**(수확 패스→재생성, 연속 3타임아웃 시 중단 규칙). Stitch 웹 UI(프로젝트 9385904003821333054) 육안 확인 권장. 부수: 로그인 슬라이드 CMS·RFP·보고서 4종 커밋(1de3b9b) |
|
||||||
|
| 2026-07-12 | **Stitch 전 화면 확보 완료(64/64)** — 서비스 회복 후 수확 패스 재실행: 잔여 39화면 전부 서버측 지연 생성 완료 상태(프로젝트 27→155 화면)로 재생성 0회·다운로드 43파일(보조 변형 5 포함: P4 3단계·P7 예매확인·M15 권종선택) 실패 0. `_workspace/stitch_gen/{harvest2.py,screen_titles.txt,harvest_report.md}`. 다음: frontend/mobile dev 이식 + design.md 🔲미생성 마커 갱신(designer 경유) |
|
||||||
|
| 2026-07-12 | **실데이터·2FA 트랙 마감** — ①실데이터 집계 API 5패키지(analytics·dashboard·ops·admin·catalog + V13 인덱스) ②TOTP 2FA 완결(SecretCipher AES-256-GCM·V12·OtpChallengePanel/OtpSetupPage·OTP_ENFORCE env) ③공통 업무기능 SCR-39~48 화면(`screens/work/`) 배선 ④M2 부스 겹침 검사(BOOTH_OVERLAP·compliance-v1.1) + 단위테스트 3종. 검증: backend compileJava+test·frontend tsc 통과, QA PASS(blocker/major 0, minor 2=RIGGING_RANGE semantics 소유자 결정 대기·운영 KINTEX_OTP_ENC_KEY 주입 게이트 — `_workspace/09_qa_track_close.md`). 계약 갭 기록: `_workspace/{07_work_api_gaps,08_m2m5_contract_changes}.md` |
|
||||||
|
|||||||
@ -0,0 +1,418 @@
|
|||||||
|
<!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 EMS - 서류 및 마일스톤</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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #c2c7d1;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"primary": "#003765",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"outline": "#727781",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"outline-variant": "#c2c7d1",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"surface-container-highest": "#dbe2fa"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"base": "4px",
|
||||||
|
"container-padding": "24px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"headline-md": ["Inter", "sans-serif"],
|
||||||
|
"title-sm": ["Inter", "sans-serif"],
|
||||||
|
"body-sm": ["Inter", "sans-serif"],
|
||||||
|
"label-md": ["Geist", "sans-serif"],
|
||||||
|
"display-lg": ["Inter", "sans-serif"],
|
||||||
|
"body-base": ["Inter", "sans-serif"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-surface font-body-base antialiased">
|
||||||
|
<!-- Sidebar Navigation -->
|
||||||
|
<aside class="fixed left-0 top-0 h-screen w-64 border-r border-outline-variant bg-surface-container-lowest flex flex-col p-4 z-50">
|
||||||
|
<div class="mb-8 px-2">
|
||||||
|
<h1 class="text-headline-md font-display-lg text-primary tracking-tighter">KINTEX EMS</h1>
|
||||||
|
<p class="text-label-md text-on-surface-variant">Enterprise Management</p>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 space-y-1">
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-container rounded-xl flex items-center gap-3 px-4 py-3 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="font-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-container rounded-xl flex items-center gap-3 px-4 py-3 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">calendar_month</span>
|
||||||
|
<span class="font-label-md">Exhibition Schedule</span>
|
||||||
|
</a>
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-container rounded-xl flex items-center gap-3 px-4 py-3 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">meeting_room</span>
|
||||||
|
<span class="font-label-md">Hall Operations</span>
|
||||||
|
</a>
|
||||||
|
<a class="bg-secondary-container text-on-secondary-container rounded-xl font-bold flex items-center gap-3 px-4 py-3" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">description</span>
|
||||||
|
<span class="font-label-md">서류·마일스톤</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="mt-auto space-y-1">
|
||||||
|
<button class="w-full bg-primary text-on-primary rounded-xl py-3 px-4 flex items-center justify-center gap-2 mb-6 hover:bg-primary-container transition-all active:scale-95">
|
||||||
|
<span class="material-symbols-outlined">add</span>
|
||||||
|
<span class="font-label-md">New Exhibition</span>
|
||||||
|
</button>
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-container rounded-xl flex items-center gap-3 px-4 py-3 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span class="font-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-container rounded-xl flex items-center gap-3 px-4 py-3 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
<span class="font-label-md">Support</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Top Navigation Bar -->
|
||||||
|
<header class="fixed top-0 right-0 w-[calc(100%-16rem)] h-16 border-b border-outline-variant bg-surface-bright/80 backdrop-blur-md z-40 flex items-center justify-between px-6">
|
||||||
|
<div class="flex items-center gap-2 text-label-md text-on-surface-variant">
|
||||||
|
<span>Exhibition</span>
|
||||||
|
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||||
|
<span class="text-primary font-semibold">Hall 1</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="relative group">
|
||||||
|
<span class="material-symbols-outlined p-2 text-on-surface-variant hover:bg-surface-container rounded-full cursor-pointer transition-colors">notifications</span>
|
||||||
|
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full border-2 border-surface-bright"></span>
|
||||||
|
</div>
|
||||||
|
<span class="material-symbols-outlined p-2 text-on-surface-variant hover:bg-surface-container rounded-full cursor-pointer transition-colors">apps</span>
|
||||||
|
<div class="flex items-center gap-3 pl-4 border-l border-outline-variant">
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-label-md font-bold text-on-surface">Admin User</p>
|
||||||
|
<p class="text-[10px] text-on-surface-variant">Administrator</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary-container overflow-hidden ring-2 ring-outline-variant">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A professional corporate headshot of a middle-aged South Korean male administrator, wearing a crisp dark navy business suit and a light blue shirt. He has a warm yet authoritative expression, set against a blurred modern architectural background with cool glass tones and soft lighting, reflecting a premium KINTEX office environment." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDL1fcyb7FDfQ06Uo-kHI5mCja5hHnhJfckNR2gUKgAEgeoVF-OoMD39SCNNLFvIfbjKxJ9bVVsASqBVO260VeJkR5Fngxlc-nlBsZU9Jq_qzWqmkIj6meRNlfSRltmxypvIoj3norVeu8OUezAsRlnt0xpJPFLtvI3OPWwup00aGv0ZC0HvSpV6Z5uYkkkUPyAKuvIWOs_KDLCFL0q7ZfVFxDP4PJdxldsYlJpjKWts8WbLCvkr3rISx0_SrpC-EcagosOSGfO8n4"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Dashboard Content -->
|
||||||
|
<main class="ml-64 pt-16 min-h-screen">
|
||||||
|
<div class="max-w-[1280px] mx-auto p-8">
|
||||||
|
<!-- Milestone Progress Section -->
|
||||||
|
<section class="mb-10">
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-6 shadow-sm">
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<h2 class="font-headline-md text-primary flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined">reorder</span>
|
||||||
|
전시 마일스톤 현황
|
||||||
|
</h2>
|
||||||
|
<span class="text-label-md bg-secondary-fixed text-on-secondary-fixed-variant px-3 py-1 rounded-full font-bold">D-15 일람</span>
|
||||||
|
</div>
|
||||||
|
<div class="relative flex items-center justify-between px-4">
|
||||||
|
<!-- Connecting Line -->
|
||||||
|
<div class="absolute top-1/2 left-0 w-full h-[2px] bg-outline-variant -translate-y-1/2 z-0"></div>
|
||||||
|
<div class="absolute top-1/2 left-0 w-[70%] h-[2px] bg-primary -translate-y-1/2 z-0"></div>
|
||||||
|
<!-- Milestone 1 -->
|
||||||
|
<div class="relative z-10 flex flex-col items-center text-center">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-primary text-on-primary flex items-center justify-center mb-2 shadow-md">
|
||||||
|
<span class="material-symbols-outlined">check</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-label-md font-bold text-primary">D-150 배정</span>
|
||||||
|
<span class="text-[10px] text-on-surface-variant">완료</span>
|
||||||
|
</div>
|
||||||
|
<!-- Milestone 2 -->
|
||||||
|
<div class="relative z-10 flex flex-col items-center text-center">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-primary text-on-primary flex items-center justify-center mb-2 shadow-md">
|
||||||
|
<span class="material-symbols-outlined">check</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-label-md font-bold text-primary">D-30 사전협의</span>
|
||||||
|
<span class="text-[10px] text-on-surface-variant">완료</span>
|
||||||
|
</div>
|
||||||
|
<!-- Milestone 3 -->
|
||||||
|
<div class="relative z-10 flex flex-col items-center text-center">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-primary text-on-primary flex items-center justify-center mb-2 shadow-md">
|
||||||
|
<span class="material-symbols-outlined">check</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-label-md font-bold text-primary">D-25 유틸리티</span>
|
||||||
|
<span class="text-[10px] text-on-surface-variant">완료</span>
|
||||||
|
</div>
|
||||||
|
<!-- Milestone 4 (Active) -->
|
||||||
|
<div class="relative z-10 flex flex-col items-center text-center">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-surface-container-lowest border-4 border-secondary text-secondary flex items-center justify-center mb-2 shadow-lg animate-pulse">
|
||||||
|
<span class="material-symbols-outlined">pending</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-label-md font-bold text-secondary">D-7 신고서류</span>
|
||||||
|
<span class="text-[10px] text-on-secondary-fixed-variant px-2 py-0.5 bg-secondary-fixed rounded">진행중</span>
|
||||||
|
</div>
|
||||||
|
<!-- Milestone 5 -->
|
||||||
|
<div class="relative z-10 flex flex-col items-center text-center">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-surface-container-high border-2 border-outline-variant text-outline flex items-center justify-center mb-2">
|
||||||
|
<span class="material-symbols-outlined">event</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-label-md font-bold text-on-surface-variant">D-0 개장</span>
|
||||||
|
<span class="text-[10px] text-on-surface-variant">대기</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="grid grid-cols-12 gap-8">
|
||||||
|
<!-- Main Content (Required Documents) -->
|
||||||
|
<div class="col-span-8">
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm">
|
||||||
|
<div class="p-6 border-b border-outline-variant flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-title-sm text-on-surface">Required Documents Checklist</h3>
|
||||||
|
<p class="text-body-sm text-on-surface-variant">전시회 개최를 위한 필수 서류 목록 및 승인 현황</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-label-md text-primary font-bold">4/8 Complete</span>
|
||||||
|
<div class="w-32 h-2 bg-surface-container rounded-full overflow-hidden">
|
||||||
|
<div class="h-full bg-primary w-1/2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="divide-y divide-outline-variant">
|
||||||
|
<!-- Document Row 1 -->
|
||||||
|
<div class="p-4 flex items-center justify-between hover:bg-surface-container-low transition-colors group">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="material-symbols-outlined text-tertiary-container">task_alt</span>
|
||||||
|
<span class="font-body-base font-semibold text-on-surface">행사운영계획서</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-label-md font-bold bg-tertiary-fixed text-on-tertiary-fixed-variant">승인</span>
|
||||||
|
<button class="px-4 py-1.5 border border-outline-variant rounded-lg text-label-md hover:bg-surface-container transition-all">[보기]</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Document Row 2 -->
|
||||||
|
<div class="p-4 flex items-center justify-between hover:bg-surface-container-low transition-colors group">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="material-symbols-outlined text-primary">cloud_done</span>
|
||||||
|
<span class="font-body-base font-semibold text-on-surface">부스배치도</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-label-md font-bold bg-primary-fixed text-on-primary-fixed-variant">제출됨</span>
|
||||||
|
<button class="px-4 py-1.5 border border-primary text-primary rounded-lg text-label-md hover:bg-primary-fixed transition-all">[HWP 생성]</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Document Row 3 (D-Day Action) -->
|
||||||
|
<div class="p-4 flex items-center justify-between hover:bg-surface-container-low transition-colors bg-secondary-fixed/10">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="material-symbols-outlined text-secondary">edit_note</span>
|
||||||
|
<span class="font-body-base font-semibold text-on-surface">재해대처계획서</span>
|
||||||
|
<span class="bg-error text-white text-[10px] px-2 py-0.5 rounded-full font-bold">D-7</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-label-md font-bold bg-surface-container-highest text-on-surface-variant">작성중</span>
|
||||||
|
<button class="px-4 py-1.5 bg-secondary text-on-secondary rounded-lg text-label-md hover:bg-on-secondary-fixed-variant shadow-sm transition-all">[작성]</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Document Row 4 (Rejected) -->
|
||||||
|
<div class="p-4 flex items-center justify-between hover:bg-surface-container-low transition-colors">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="material-symbols-outlined text-error">cancel</span>
|
||||||
|
<span class="font-body-base font-semibold text-on-surface">리깅 구조계산서</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-label-md font-bold bg-error-container text-on-error-container">반려</span>
|
||||||
|
<button class="px-4 py-1.5 border border-error text-error rounded-lg text-label-md hover:bg-error-container transition-all">[수정]</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Remaining Rows (Pending) -->
|
||||||
|
<div class="p-4 flex items-center justify-between opacity-60">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="material-symbols-outlined text-outline">description</span>
|
||||||
|
<span class="font-body-base text-on-surface">방화관리 책임서약서</span>
|
||||||
|
</div>
|
||||||
|
<span class="px-3 py-1 rounded-full text-label-md font-bold bg-surface-container-low text-on-surface-variant">준비중</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 flex items-center justify-between opacity-60">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="material-symbols-outlined text-outline">description</span>
|
||||||
|
<span class="font-body-base text-on-surface">주차관리 신청서</span>
|
||||||
|
</div>
|
||||||
|
<span class="px-3 py-1 rounded-full text-label-md font-bold bg-surface-container-low text-on-surface-variant">준비중</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 flex items-center justify-between opacity-60">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="material-symbols-outlined text-outline">description</span>
|
||||||
|
<span class="font-body-base text-on-surface">보안요원 배치계획</span>
|
||||||
|
</div>
|
||||||
|
<span class="px-3 py-1 rounded-full text-label-md font-bold bg-surface-container-low text-on-surface-variant">준비중</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 flex items-center justify-between opacity-60">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="material-symbols-outlined text-outline">description</span>
|
||||||
|
<span class="font-body-base text-on-surface">위험물 반입신고서</span>
|
||||||
|
</div>
|
||||||
|
<span class="px-3 py-1 rounded-full text-label-md font-bold bg-surface-container-low text-on-surface-variant">준비중</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Side Panel (AI Compliance) -->
|
||||||
|
<div class="col-span-4 space-y-6">
|
||||||
|
<div class="bg-surface-container-lowest border-l-4 border-secondary rounded-xl p-6 shadow-md relative overflow-hidden group">
|
||||||
|
<div class="absolute top-0 right-0 p-4 opacity-5 group-hover:scale-110 transition-transform">
|
||||||
|
<span class="material-symbols-outlined text-[64px]" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 mb-4 text-secondary">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
<h3 class="font-title-sm">AI 서류 검수</h3>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4 mb-6">
|
||||||
|
<!-- Warning 1 -->
|
||||||
|
<div class="flex gap-3 p-3 rounded-lg bg-error-container/20 border border-error-container/30">
|
||||||
|
<span class="material-symbols-outlined text-error text-[20px]">warning</span>
|
||||||
|
<div>
|
||||||
|
<p class="text-label-md font-bold text-on-error-container">데이터 불일치 감지</p>
|
||||||
|
<p class="text-body-sm text-on-surface-variant leading-tight">부스배치도 부스 수 486 ≠ 운영계획서 510 (불일치)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Warning 2 -->
|
||||||
|
<div class="flex gap-3 p-3 rounded-lg bg-surface-container border border-outline-variant">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[20px]">info</span>
|
||||||
|
<div>
|
||||||
|
<p class="text-label-md font-bold text-primary">필수요소 누락</p>
|
||||||
|
<p class="text-body-sm text-on-surface-variant leading-tight">재해대처계획서 필수요소 누락 2건</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-secondary-fixed/30 p-4 rounded-xl mb-6">
|
||||||
|
<div class="flex items-center gap-2 mb-2 text-on-secondary-fixed">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">article</span>
|
||||||
|
<span class="text-label-md font-bold">kxwp 제출 안내</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm text-on-surface-variant leading-relaxed">
|
||||||
|
파일 자동 생성 후 업로드 안내. 작성된 데이터를 기반으로 공문서식 표준을 준수하는 문서를 즉시 생성할 수 있습니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button class="w-full py-4 bg-secondary text-on-secondary rounded-xl font-bold flex items-center justify-center gap-3 hover:shadow-lg transition-all active:scale-[0.98]">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
[자동 문서 생성하기]
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Statistics Card -->
|
||||||
|
<div class="bg-primary text-on-primary rounded-xl p-6 shadow-sm relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 opacity-10 bg-cover bg-center" data-alt="A macro-photography shot of a high-tech data visualization interface with glowing blue grid patterns and subtle digital particles. The lighting is low-key, emphasizing deep sapphire blues and crisp white digital data points. It represents a sophisticated B2B management system environment." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuB6l59ZoboD1HbO270x0SFw_KE3smIfyVOITJjMMoAkL0xqZstlQlePSvOZ1W7fHtVinJJekyoj6SokcipW-wYz8vrIihVz5d3B4R3gN7orzawNpZXAcmewVEzaIKiKJJCzysoRc7SaRRbae8dsxmqDUFsN59KoT6j95djzLraqjBm4u-r-g9OniUImGWVTsJ2RMTGrD4AN6gioCGn-qTcmHapuN9a4clfp-iiI3DANt2SrU_jvAhwjp_W_fm4ZahMr9fg75MEvTZ0')"></div>
|
||||||
|
<div class="relative z-10">
|
||||||
|
<h4 class="text-label-md uppercase tracking-wider mb-2 opacity-80">전체 공정률</h4>
|
||||||
|
<div class="text-display-lg leading-none mb-4">62.5%</div>
|
||||||
|
<div class="flex items-center gap-2 text-body-sm text-primary-fixed">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">trending_up</span>
|
||||||
|
<span>지난 주 대비 12% 상승</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Empty space for footer context -->
|
||||||
|
<div class="h-32"></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
// Simple micro-interactions
|
||||||
|
document.querySelectorAll('button').forEach(button => {
|
||||||
|
button.addEventListener('mousedown', () => {
|
||||||
|
button.classList.add('scale-95');
|
||||||
|
});
|
||||||
|
button.addEventListener('mouseup', () => {
|
||||||
|
button.classList.remove('scale-95');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Simulating AI scan pulsing effect
|
||||||
|
const aiCard = document.querySelector('.border-secondary');
|
||||||
|
setInterval(() => {
|
||||||
|
aiCard.classList.toggle('ring-2');
|
||||||
|
aiCard.classList.toggle('ring-secondary/20');
|
||||||
|
}, 2000);
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,356 @@
|
|||||||
|
<!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 Document Studio | 재해대처계획서</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;800&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"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<!-- Tailwind Configuration -->
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"primary": "#003765",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"outline-variant": "#c2c7d1",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"outline": "#727781",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-background": "#141b2c"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"container-padding": "24px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"gutter": "16px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"display-lg-mobile": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"title-sm": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"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"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body { font-family: 'Inter', sans-serif; }
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.a4-preview {
|
||||||
|
width: 210mm;
|
||||||
|
min-height: 297mm;
|
||||||
|
padding: 20mm;
|
||||||
|
margin: 20px auto;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
.hwp-table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
border: 1.5px solid #000;
|
||||||
|
}
|
||||||
|
.hwp-table th, .hwp-table td {
|
||||||
|
border: 1px solid #000;
|
||||||
|
padding: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.hwp-table th { background-color: #f2f2f2; font-weight: bold; width: 25%; }
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
.scrollbar-hide::-webkit-scrollbar { display: none; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface text-on-surface overflow-hidden">
|
||||||
|
<!-- Top Navigation Bar -->
|
||||||
|
<header class="flex justify-between items-center w-full px-container-padding h-16 sticky top-0 z-50 bg-surface border-b border-outline-variant shadow-sm">
|
||||||
|
<div class="flex items-center gap-8">
|
||||||
|
<div class="font-display-lg text-display-lg font-bold text-primary-container">KINTEX Document Studio</div>
|
||||||
|
<nav class="hidden md:flex gap-6">
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-base" href="#">Exhibitions</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-base" href="#">Templates</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-base" href="#">History</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-base" href="#">Resources</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="relative flex items-center bg-surface-container-low border border-outline-variant rounded-full px-4 py-1.5 w-64">
|
||||||
|
<span class="material-symbols-outlined text-outline text-[20px]">search</span>
|
||||||
|
<input class="bg-transparent border-none focus:ring-0 text-body-sm w-full ml-2" placeholder="Search documents..." type="text"/>
|
||||||
|
</div>
|
||||||
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-transform active:scale-95 duration-150">notifications</button>
|
||||||
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-transform active:scale-95 duration-150">settings</button>
|
||||||
|
<div class="w-8 h-8 rounded-full overflow-hidden border border-outline-variant">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A professional male user profile avatar with a friendly expression, set against a neutral studio background, suitable for a corporate management application." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA2A_7Gq1_oUQimKdjSYk--Kr4w3tmnei71GWQhJALfLHARlnjoupSih78YI5-QywKlq_RiVTXBsl5gC09OE0fIPBaHsh86H-U7Nw2UIi_IhUr7hXDbD6-eXGgkLMJfrv564oVbmLRiQl2McMqYA02rp3Gv9wAWOgdrNW2yd9KPQo8f-rYrmxd2xGkMzzoSTtewIMfW50iSPs23lBsPJD-Ef0v_Ln3wF_uLxTlHWVdDI9xi1IObhgb4fT1AFOrggsqJxoSGeki40wU"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="flex h-[calc(100vh-64px-60px)]">
|
||||||
|
<!-- Side Navigation Bar -->
|
||||||
|
<aside class="fixed left-0 top-16 bottom-0 w-64 flex flex-col py-stack-lg z-40 bg-surface-container-low border-r border-outline-variant">
|
||||||
|
<div class="px-6 mb-8 flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 bg-primary-container rounded-lg flex items-center justify-center">
|
||||||
|
<img class="w-8 h-8 object-contain" data-alt="The official KINTEX corporate identity logo emblem, featuring bold geometric shapes that symbolize modern architecture and global connection, presented in professional blue tones on a clean background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAFtwSt-s3T6XpKJNWxB8-kHA10OKHil0bfW6nnIlrofpD1XroGD0CHGZgpXEbwvOalXnsE0ruhyJCNRxFGljlRiUIf8xCrGhB19rTQmIBmQkRSdRR8YqeyG4lR8KKo-C71OTXhLgZMF0NBkKOMRFd3h4X0RyQYMjtnRpns8gUGh90QAwtaN4rj3YsFcFzeyOe0pxrhHgwpAozfW4ZXU3sHZx_nRt9CieupBKb-RxNfoM1XEHVYK80zSNhwYSxlYWb7DgNCSvbEagc"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="font-headline-md text-[16px] font-extrabold text-primary-container leading-tight">Organizer Portal</h2>
|
||||||
|
<p class="font-label-md text-on-surface-variant opacity-70">Exhibition Management</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 space-y-1">
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-variant rounded-full mx-2 px-4 py-3 flex items-center gap-3 transition-all active:scale-98" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="font-label-md text-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="bg-secondary-container text-on-secondary-container rounded-full mx-2 px-4 py-3 flex items-center gap-3 transition-all active:scale-98" href="#">
|
||||||
|
<span class="material-symbols-outlined">description</span>
|
||||||
|
<span class="font-label-md text-label-md">Exhibitor Forms</span>
|
||||||
|
</a>
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-variant rounded-full mx-2 px-4 py-3 flex items-center gap-3 transition-all active:scale-98" href="#">
|
||||||
|
<span class="material-symbols-outlined">mail</span>
|
||||||
|
<span class="font-label-md text-label-md">Official Letters</span>
|
||||||
|
</a>
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-variant rounded-full mx-2 px-4 py-3 flex items-center gap-3 transition-all active:scale-98" href="#">
|
||||||
|
<span class="material-symbols-outlined">verified</span>
|
||||||
|
<span class="font-label-md text-label-md">Contract Auth</span>
|
||||||
|
</a>
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-variant rounded-full mx-2 px-4 py-3 flex items-center gap-3 transition-all active:scale-98" href="#">
|
||||||
|
<span class="material-symbols-outlined">psychology</span>
|
||||||
|
<span class="font-label-md text-label-md">AI Assistant</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="px-2 mt-auto border-t border-outline-variant pt-4 space-y-1">
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-variant rounded-full px-4 py-3 flex items-center gap-3 transition-all active:scale-98" href="#">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
<span class="font-label-md text-label-md">Help Center</span>
|
||||||
|
</a>
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-variant rounded-full px-4 py-3 flex items-center gap-3 transition-all active:scale-98" href="#">
|
||||||
|
<span class="material-symbols-outlined">logout</span>
|
||||||
|
<span class="font-label-md text-label-md">Log Out</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<main class="ml-64 w-full flex overflow-hidden">
|
||||||
|
<!-- Left Side: Form Editor -->
|
||||||
|
<section class="w-1/2 flex flex-col bg-surface border-r border-outline-variant overflow-y-auto scrollbar-hide px-8 py-10">
|
||||||
|
<div class="mb-8">
|
||||||
|
<h1 class="font-headline-md text-headline-md text-on-surface mb-2">재해대처계획서 작성</h1>
|
||||||
|
<p class="font-body-base text-on-surface-variant">행사 성격에 맞는 안전 관리 계획을 수립하세요.</p>
|
||||||
|
</div>
|
||||||
|
<button class="w-full flex items-center justify-center gap-2 py-4 px-6 bg-secondary text-on-secondary rounded-xl font-bold mb-10 transition-all hover:bg-secondary-container active:scale-98 shadow-md">
|
||||||
|
<span class="material-symbols-outlined">auto_awesome</span>
|
||||||
|
행사 데이터로 자동 채움
|
||||||
|
</button>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<!-- Section 1: Open Accordion -->
|
||||||
|
<div class="border border-primary rounded-xl overflow-hidden bg-white">
|
||||||
|
<div class="flex items-center justify-between p-4 bg-primary text-on-primary cursor-pointer">
|
||||||
|
<h3 class="font-title-sm">1. 행사 개요</h3>
|
||||||
|
<span class="material-symbols-outlined">expand_less</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 space-y-6">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-md text-on-surface-variant block">행사명</label>
|
||||||
|
<input class="w-full border-outline-variant rounded-lg focus:border-primary focus:ring-1 focus:ring-primary text-body-base py-3" type="text" value="2024 글로벌 테크 엑스포"/>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-md text-on-surface-variant block">개최 일시</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input class="w-full border-outline-variant rounded-lg focus:border-primary focus:ring-1 focus:ring-primary text-body-base py-3 px-4" type="date" value="2024-11-15"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-md text-on-surface-variant block">장소</label>
|
||||||
|
<select class="w-full border-outline-variant rounded-lg focus:border-primary focus:ring-1 focus:ring-primary text-body-base py-3">
|
||||||
|
<option>제1전시장 1~3홀</option>
|
||||||
|
<option>제1전시장 4~5홀</option>
|
||||||
|
<option>제2전시장 7~8홀</option>
|
||||||
|
<option>제2전시장 9~10홀</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-md text-on-surface-variant block">예상 관람객 수</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input class="w-full border-outline-variant rounded-lg focus:border-primary focus:ring-1 focus:ring-primary text-body-base py-3 pr-10" type="number" value="15000"/>
|
||||||
|
<span class="absolute right-4 top-1/2 -translate-y-1/2 font-label-md text-on-surface-variant">명</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Section 2: Closed Accordion -->
|
||||||
|
<div class="border border-outline-variant rounded-xl overflow-hidden bg-white">
|
||||||
|
<div class="flex items-center justify-between p-4 cursor-pointer hover:bg-surface-container-low transition-colors">
|
||||||
|
<h3 class="font-title-sm text-on-surface">2. 안전 관리 담당</h3>
|
||||||
|
<span class="material-symbols-outlined text-outline">expand_more</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Section 3: Closed Accordion -->
|
||||||
|
<div class="border border-outline-variant rounded-xl overflow-hidden bg-white">
|
||||||
|
<div class="flex items-center justify-between p-4 cursor-pointer hover:bg-surface-container-low transition-colors">
|
||||||
|
<h3 class="font-title-sm text-on-surface">3. 비상 연락 체계</h3>
|
||||||
|
<span class="material-symbols-outlined text-outline">expand_more</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Section 4: Closed Accordion -->
|
||||||
|
<div class="border border-outline-variant rounded-xl overflow-hidden bg-white">
|
||||||
|
<div class="flex items-center justify-between p-4 cursor-pointer hover:bg-surface-container-low transition-colors">
|
||||||
|
<h3 class="font-title-sm text-on-surface">4. 위험물 목록</h3>
|
||||||
|
<span class="material-symbols-outlined text-outline">expand_more</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Right Side: Live A4 Preview -->
|
||||||
|
<section class="w-1/2 bg-surface-dim overflow-y-auto p-12 flex flex-col items-center">
|
||||||
|
<div class="a4-preview relative">
|
||||||
|
<div class="text-center mb-10">
|
||||||
|
<h2 class="text-[28px] font-bold border-b-4 border-black inline-block pb-2 px-8">재 해 대 처 계 획 서</h2>
|
||||||
|
</div>
|
||||||
|
<table class="hwp-table mb-8">
|
||||||
|
<tbody><tr>
|
||||||
|
<th>행사명</th>
|
||||||
|
<td colspan="3">2024 글로벌 테크 엑스포</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>일시</th>
|
||||||
|
<td>2024. 11. 15. ~ 11. 17.</td>
|
||||||
|
<th>장소</th>
|
||||||
|
<td>제1전시장 1~3홀</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>주최/주관</th>
|
||||||
|
<td>KINTEX 테크조직위원회</td>
|
||||||
|
<th>예상인원</th>
|
||||||
|
<td>15,000명 (최대 5,000명/일)</td>
|
||||||
|
</tr>
|
||||||
|
</tbody></table>
|
||||||
|
<div class="mb-8">
|
||||||
|
<h4 class="text-[16px] font-bold mb-4">1. 안전관리 조직체계</h4>
|
||||||
|
<div class="border border-black p-4 min-h-[150px] text-[13px] leading-relaxed">
|
||||||
|
행사장 내 안전사고 예방을 위하여 총괄책임자 1인, 현장안전요원 45인을 배치한다. 비상시 인근 소방서 및 경찰서와의 협조 체계를 구축하여 즉각적인 대응이 가능하도록 운영한다. 각 홀별 출입구에 안전 요원을 상주시켜 밀집도를 관리하며, 정기적인 장내 방송을 통해 안전 수칙을 안내한다.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-12">
|
||||||
|
<h4 class="text-[16px] font-bold mb-4">2. 주요 재해대처 방안</h4>
|
||||||
|
<ul class="list-disc pl-5 text-[13px] space-y-2">
|
||||||
|
<li>화재 발생 시: 즉시 소방시설 가동 및 안내 방송을 통한 관람객 대피 유도</li>
|
||||||
|
<li>응급환자 발생 시: 현장 의무실 이송 및 119 구급대 협조 요청</li>
|
||||||
|
<li>정전 발생 시: 비상 발전기 가동 및 유도등 점등 확인</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="absolute bottom-20 right-20 text-center">
|
||||||
|
<div class="mb-4 text-[14px]">2024년 10월 28일</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="text-[16px] font-bold">주식회사 킨텍스 대표이사</span>
|
||||||
|
<div class="w-16 h-16 border-2 border-red-500 rounded-full flex items-center justify-center text-red-500 font-bold rotate-12 relative">
|
||||||
|
<span class="text-[12px]">KINTEX<br/>직인</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<!-- Sticky Bottom Bar -->
|
||||||
|
<footer class="fixed bottom-0 left-64 right-0 flex justify-between items-center px-container-padding py-3 z-50 bg-white/80 backdrop-blur-md border-t border-outline-variant shadow-md">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant text-[18px]">info</span>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant">제출은 kxwp 업로드용 파일 생성 방식입니다</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<button class="px-6 py-2 border border-outline text-on-surface rounded-lg font-bold text-label-md hover:bg-surface-container-low transition-all active:scale-95">임시 저장</button>
|
||||||
|
<button class="px-6 py-2 border border-outline text-on-surface rounded-lg font-bold text-label-md hover:bg-surface-container-low transition-all active:scale-95">HWP 생성</button>
|
||||||
|
<button class="px-6 py-2 border border-outline text-on-surface rounded-lg font-bold text-label-md hover:bg-surface-container-low transition-all active:scale-95">PDF 생성</button>
|
||||||
|
<button class="px-10 py-2 bg-[#0066B3] text-white rounded-lg font-bold text-label-md hover:opacity-90 transition-all active:scale-95 shadow-lg">제 출</button>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
// Simple Micro-interactions
|
||||||
|
document.querySelectorAll('.cursor-pointer').forEach(item => {
|
||||||
|
item.addEventListener('click', () => {
|
||||||
|
// Simplified toggle logic for visual demo
|
||||||
|
const icon = item.querySelector('.material-symbols-outlined');
|
||||||
|
if (icon) {
|
||||||
|
icon.textContent = icon.textContent === 'expand_more' ? 'expand_less' : 'expand_more';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,402 @@
|
|||||||
|
<!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 AI - SCR-25 Logistics Portal</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@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"/>
|
||||||
|
<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-fixed": "#d3e4ff",
|
||||||
|
"outline": "#727781",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"primary": "#003765",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"outline-variant": "#c2c7d1",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"brand-blue": "#0066B3",
|
||||||
|
"amber-accent": "#FFB000"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"body-base": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"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', 'Pretendard', sans-serif; }
|
||||||
|
.grid-header-sticky { position: sticky; left: 0; z-index: 10; background-color: #ffffff; }
|
||||||
|
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb { background: #c2c7d1; border-radius: 10px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-background overflow-hidden flex h-screen">
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<aside class="docked left-0 h-full w-64 flex flex-col p-4 space-y-4 bg-surface-bright border-r border-outline-variant">
|
||||||
|
<div class="flex items-center space-x-3 px-2 mb-4">
|
||||||
|
<div class="w-10 h-10 bg-primary flex items-center justify-center rounded-lg">
|
||||||
|
<span class="material-symbols-outlined text-white" style="font-variation-settings: 'FILL' 1;">automation</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="text-title-sm font-headline-md text-primary uppercase tracking-wider">KINTEX AI</h1>
|
||||||
|
<p class="text-label-xs text-on-surface-variant">Logistics Management</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 space-y-1">
|
||||||
|
<a class="flex items-center space-x-3 px-4 py-3 bg-primary-fixed text-on-primary-fixed font-bold rounded-lg transition-all" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">dashboard</span>
|
||||||
|
<span class="text-body-base font-body-base">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center space-x-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low rounded-lg transition-all" href="#">
|
||||||
|
<span class="material-symbols-outlined">calendar_today</span>
|
||||||
|
<span class="text-body-base font-body-base">Exhibition Schedule</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center space-x-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low rounded-lg transition-all" href="#">
|
||||||
|
<span class="material-symbols-outlined">warehouse</span>
|
||||||
|
<span class="text-body-base font-body-base">Hall Operations</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center space-x-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low rounded-lg transition-all" href="#">
|
||||||
|
<span class="material-symbols-outlined">analytics</span>
|
||||||
|
<span class="text-body-base font-body-base">Business Intelligence</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="pt-4 border-t border-outline-variant space-y-1">
|
||||||
|
<button class="w-full flex items-center justify-center space-x-2 py-3 bg-primary text-white font-bold rounded-lg mb-4 hover:opacity-90 transition-all">
|
||||||
|
<span class="material-symbols-outlined">add</span>
|
||||||
|
<span class="text-label-md">New Reservation</span>
|
||||||
|
</button>
|
||||||
|
<a class="flex items-center space-x-3 px-4 py-2 text-on-surface-variant hover:bg-surface-container-low rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span class="text-body-sm">Settings</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center space-x-3 px-4 py-2 text-on-surface-variant hover:bg-surface-container-low rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
<span class="text-body-sm">Support</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<div class="flex-1 flex flex-col overflow-hidden">
|
||||||
|
<!-- TopNavBar -->
|
||||||
|
<header class="flex justify-between items-center w-full px-container-padding h-16 bg-surface-container-lowest border-b border-outline-variant shadow-sm z-20">
|
||||||
|
<div class="flex items-center space-x-6">
|
||||||
|
<span class="text-headline-md font-headline-md text-primary">Logistics Portal</span>
|
||||||
|
<div class="relative">
|
||||||
|
<span class="absolute inset-y-0 left-3 flex items-center text-outline">
|
||||||
|
<span class="material-symbols-outlined">search</span>
|
||||||
|
</span>
|
||||||
|
<input class="pl-10 pr-4 py-2 w-64 bg-surface-container-low border border-outline-variant rounded-full text-body-sm focus:ring-2 focus:ring-primary outline-none" placeholder="예약 번호 또는 차량 조회" type="text"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-8">
|
||||||
|
<nav class="hidden md:flex space-x-6">
|
||||||
|
<a class="text-primary border-b-2 border-primary pb-1 text-label-md font-label-md transition-all" href="#">Operations</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary text-label-md font-label-md transition-all" href="#">Schedules</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary text-label-md font-label-md transition-all" href="#">Fleet</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary text-label-md font-label-md transition-all" href="#">Reports</a>
|
||||||
|
</nav>
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<div class="flex items-center space-x-2 px-3 py-1 bg-tertiary-fixed text-on-tertiary-fixed rounded-full">
|
||||||
|
<div class="w-2 h-2 bg-tertiary-fixed-dim rounded-full animate-pulse"></div>
|
||||||
|
<span class="text-label-md">System Status</span>
|
||||||
|
</div>
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-low rounded-full transition-all">
|
||||||
|
<span class="material-symbols-outlined">notifications</span>
|
||||||
|
</button>
|
||||||
|
<div class="flex items-center space-x-2 cursor-pointer hover:bg-surface-container-low p-1 rounded-full pr-3">
|
||||||
|
<img class="w-8 h-8 rounded-full border border-outline-variant" data-alt="A professional corporate profile avatar of a logistics manager in a modern office, soft lighting, 8k resolution, minimalist style with clean blue accents." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDj0QmxsQnQr53Or23K9nTneIJUeZFgCUKJa_ooxKflp1QxysUAm_9Q1Cdgud5HiWb2ajc6x7xDzdUU706_8jUAPaF5YXnxIGjjZyoDyD69lteZJ4c2hGq4EPRKwc7MbybwfpWxyVr50HGPNQHzlslh7qcEzM7shy47aT9_ufvmizCa5xCnYn9N0C11NqVMJKfqXmOJQctXZbeudfs0pxFXFaGSnxVM0LjSv8GOz5BFjTaG8l38QEk8w46xqMxL9EMlR9w3vbcHCyE"/>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface">Admin Kim</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<main class="flex-1 flex overflow-hidden">
|
||||||
|
<!-- Left Area (2/3) -->
|
||||||
|
<section class="w-2/3 flex flex-col p-8 space-y-6 overflow-y-auto custom-scrollbar">
|
||||||
|
<div class="flex justify-between items-end">
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="text-label-xs text-on-surface-variant">행사 선택</label>
|
||||||
|
<div class="relative">
|
||||||
|
<select class="appearance-none bg-surface-container-lowest border border-outline-variant rounded-lg px-4 py-2.5 pr-10 text-body-base font-medium min-w-[240px] focus:ring-2 focus:ring-primary outline-none">
|
||||||
|
<option>2026 서울 모터쇼</option>
|
||||||
|
<option>2026 국제 물류 산업전</option>
|
||||||
|
</select>
|
||||||
|
<span class="absolute right-3 top-3 material-symbols-outlined pointer-events-none">expand_more</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="text-label-xs text-on-surface-variant">홀 선택</label>
|
||||||
|
<div class="relative">
|
||||||
|
<select class="appearance-none bg-surface-container-lowest border border-outline-variant rounded-lg px-4 py-2.5 pr-10 text-body-base font-medium min-w-[120px] focus:ring-2 focus:ring-primary outline-none">
|
||||||
|
<option>홀 7</option>
|
||||||
|
<option>홀 8</option>
|
||||||
|
<option>홀 9</option>
|
||||||
|
</select>
|
||||||
|
<span class="absolute right-3 top-3 material-symbols-outlined pointer-events-none">expand_more</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center bg-surface-container-low p-1 rounded-lg">
|
||||||
|
<button class="px-6 py-2 bg-white text-primary font-bold rounded shadow-sm border border-outline-variant">반입</button>
|
||||||
|
<button class="px-6 py-2 text-on-surface-variant hover:text-primary transition-all">반출</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Scheduling Grid -->
|
||||||
|
<div class="flex-1 bg-surface-container-lowest rounded-xl border border-outline-variant shadow-sm overflow-hidden flex flex-col">
|
||||||
|
<div class="flex border-b border-outline-variant bg-surface-container-low">
|
||||||
|
<div class="w-24 p-4 font-bold text-label-md text-on-surface-variant border-r border-outline-variant flex items-center justify-center">DOCK</div>
|
||||||
|
<div class="flex-1 grid grid-cols-12">
|
||||||
|
<div class="p-4 text-center text-label-md font-bold text-on-surface-variant border-r border-outline-variant last:border-r-0">08:00</div>
|
||||||
|
<div class="p-4 text-center text-label-md font-bold text-on-surface-variant border-r border-outline-variant last:border-r-0">09:00</div>
|
||||||
|
<div class="p-4 text-center text-label-md font-bold text-on-surface-variant border-r border-outline-variant last:border-r-0">10:00</div>
|
||||||
|
<div class="p-4 text-center text-label-md font-bold text-on-surface-variant border-r border-outline-variant last:border-r-0">11:00</div>
|
||||||
|
<div class="p-4 text-center text-label-md font-bold text-on-surface-variant border-r border-outline-variant last:border-r-0">12:00</div>
|
||||||
|
<div class="p-4 text-center text-label-md font-bold text-on-surface-variant border-r border-outline-variant last:border-r-0">13:00</div>
|
||||||
|
<div class="p-4 text-center text-label-md font-bold text-on-surface-variant border-r border-outline-variant last:border-r-0">14:00</div>
|
||||||
|
<div class="p-4 text-center text-label-md font-bold text-on-surface-variant border-r border-outline-variant last:border-r-0">15:00</div>
|
||||||
|
<div class="p-4 text-center text-label-md font-bold text-on-surface-variant border-r border-outline-variant last:border-r-0">16:00</div>
|
||||||
|
<div class="p-4 text-center text-label-md font-bold text-on-surface-variant border-r border-outline-variant last:border-r-0">17:00</div>
|
||||||
|
<div class="p-4 text-center text-label-md font-bold text-on-surface-variant border-r border-outline-variant last:border-r-0">18:00</div>
|
||||||
|
<div class="p-4 text-center text-label-md font-bold text-on-surface-variant border-r border-outline-variant last:border-r-0">19:00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 overflow-y-auto custom-scrollbar">
|
||||||
|
<!-- Rows -->
|
||||||
|
<div class="flex h-16 border-b border-outline-variant group">
|
||||||
|
<div class="w-24 p-4 font-bold text-body-sm text-primary flex items-center justify-center border-r border-outline-variant bg-surface-container-lowest">도크 1</div>
|
||||||
|
<div class="flex-1 grid grid-cols-12">
|
||||||
|
<div class="col-span-2 p-1 bg-brand-blue/10 border-r border-outline-variant/30 flex items-center">
|
||||||
|
<div class="w-full h-full bg-brand-blue text-white p-2 rounded text-[10px] flex items-center truncate">
|
||||||
|
(주)공간디자인 · 5t 트럭
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-1 border-r border-outline-variant/30 hover:bg-surface-container-low cursor-pointer transition-all"></div>
|
||||||
|
<div class="col-span-2 p-1 border-r border-outline-variant/30">
|
||||||
|
<div class="w-full h-full bg-amber-accent text-on-surface p-2 rounded text-[10px] flex items-center font-bold">
|
||||||
|
<span class="material-symbols-outlined text-[14px] mr-1">auto_awesome</span>
|
||||||
|
중량물 우선 (5t 이상)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-7 border-r border-outline-variant/30 last:border-r-0 hover:bg-surface-container-low cursor-pointer transition-all"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex h-16 border-b border-outline-variant">
|
||||||
|
<div class="w-24 p-4 font-bold text-body-sm text-primary flex items-center justify-center border-r border-outline-variant">도크 2</div>
|
||||||
|
<div class="flex-1 grid grid-cols-12 bg-surface-container-lowest">
|
||||||
|
<div class="col-span-4 border-r border-outline-variant/30 hover:bg-surface-container-low cursor-pointer transition-all"></div>
|
||||||
|
<div class="col-span-3 p-1 border-r border-outline-variant/30">
|
||||||
|
<div class="w-full h-full bg-brand-blue text-white p-2 rounded text-[10px] flex items-center truncate">
|
||||||
|
글로벌부스테크 · 2.5t 트럭
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-5 border-r border-outline-variant/30 last:border-r-0 hover:bg-surface-container-low cursor-pointer transition-all"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex h-16 border-b border-outline-variant">
|
||||||
|
<div class="w-24 p-4 font-bold text-body-sm text-primary flex items-center justify-center border-r border-outline-variant">도크 3</div>
|
||||||
|
<div class="flex-1 grid grid-cols-12">
|
||||||
|
<div class="col-span-1 border-r border-outline-variant/30 hover:bg-surface-container-low cursor-pointer transition-all"></div>
|
||||||
|
<div class="col-span-2 p-1 bg-brand-blue/10 border-r border-outline-variant/30 flex items-center">
|
||||||
|
<div class="w-full h-full bg-brand-blue text-white p-2 rounded text-[10px] flex items-center truncate">
|
||||||
|
비욘드디자인 · 1t 탑차
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-9 border-r border-outline-variant/30 last:border-r-0 hover:bg-surface-container-low cursor-pointer transition-all"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex h-16 border-b border-outline-variant">
|
||||||
|
<div class="w-24 p-4 font-bold text-body-sm text-primary flex items-center justify-center border-r border-outline-variant">도크 4</div>
|
||||||
|
<div class="flex-1 grid grid-cols-12">
|
||||||
|
<div class="col-span-12 border-r border-outline-variant/30 last:border-r-0 hover:bg-surface-container-low cursor-pointer transition-all"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex h-16 border-b border-outline-variant">
|
||||||
|
<div class="w-24 p-4 font-bold text-body-sm text-primary flex items-center justify-center border-r border-outline-variant">도크 5</div>
|
||||||
|
<div class="flex-1 grid grid-cols-12">
|
||||||
|
<div class="col-span-8 border-r border-outline-variant/30 hover:bg-surface-container-low cursor-pointer transition-all"></div>
|
||||||
|
<div class="col-span-2 p-1 border-r border-outline-variant/30">
|
||||||
|
<div class="w-full h-full bg-brand-blue text-white p-2 rounded text-[10px] flex items-center truncate">
|
||||||
|
네오로지스 · 5t 윙바디
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2 border-r border-outline-variant/30 last:border-r-0 hover:bg-surface-container-low cursor-pointer transition-all"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex h-16 border-b border-outline-variant">
|
||||||
|
<div class="w-24 p-4 font-bold text-body-sm text-primary flex items-center justify-center border-r border-outline-variant">도크 6</div>
|
||||||
|
<div class="flex-1 grid grid-cols-12">
|
||||||
|
<div class="col-span-12 hover:bg-surface-container-low cursor-pointer transition-all"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Right Area (1/3) -->
|
||||||
|
<aside class="w-1/3 bg-white border-l border-outline-variant p-8 flex flex-col space-y-8 overflow-y-auto custom-scrollbar">
|
||||||
|
<section class="space-y-6">
|
||||||
|
<div class="flex items-center space-x-2 pb-2 border-b-2 border-primary w-fit">
|
||||||
|
<span class="material-symbols-outlined text-primary">event_available</span>
|
||||||
|
<h2 class="text-headline-md font-headline-md text-primary">슬롯 예약</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 gap-5">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="text-label-md font-label-md text-on-surface">차량 번호</label>
|
||||||
|
<input class="w-full p-3 bg-surface-container-low border border-outline-variant rounded-lg text-body-base outline-none focus:ring-2 focus:ring-primary" placeholder="예: 12가 3456" type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="text-label-md font-label-md text-on-surface">차량 중량</label>
|
||||||
|
<div class="relative">
|
||||||
|
<select class="w-full p-3 pr-10 appearance-none bg-surface-container-low border border-outline-variant rounded-lg text-body-base outline-none focus:ring-2 focus:ring-primary">
|
||||||
|
<option>1t</option>
|
||||||
|
<option>2.5t</option>
|
||||||
|
<option>5t</option>
|
||||||
|
<option>11t 이상</option>
|
||||||
|
</select>
|
||||||
|
<span class="absolute right-3 top-3.5 material-symbols-outlined pointer-events-none text-outline">expand_more</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="text-label-md font-label-md text-on-surface">반입 품목</label>
|
||||||
|
<input class="w-full p-3 bg-surface-container-low border border-outline-variant rounded-lg text-body-base outline-none focus:ring-2 focus:ring-primary" type="text" value="전시 부스 자재"/>
|
||||||
|
</div>
|
||||||
|
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||||
|
<div class="relative flex items-center justify-center">
|
||||||
|
<input class="peer h-6 w-6 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/>
|
||||||
|
</div>
|
||||||
|
<span class="text-body-base font-medium">지게차 신청 (유료)</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 bg-primary text-white p-4 rounded-xl shadow-lg cursor-pointer hover:bg-primary-container transition-all group">
|
||||||
|
<div class="flex-1">
|
||||||
|
<span class="text-headline-md font-bold block">통행증 발급 (QR)</span>
|
||||||
|
<span class="text-label-xs opacity-80 uppercase">Generate Logistics Pass</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-1 rounded-lg">
|
||||||
|
<img class="w-12 h-12" data-alt="A clean, minimalist QR code thumbnail on a white rounded square background, high-tech and sharp vector style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDaJ_Va3nXPp97SeM1apMuvq7RxYcH88bw4dLxx9So1hXylg2QuuRyurp1s5-htuMVgcBRRQvjhThNX6C47Qx44y9aAjlSX2LmBnkQZwrWVMbSBd6wE5TT5B-0VxIzBaTf4nte4Y8fOiWcw5zL3ekPWq-5zsr3FqO8dVLYl6tsFamf11E4RvCeHx8koWXsa-gjnS-xBjlPvrzKUhWIUPchmDk-PfDeJIcM2fP8t5JN74Hhu5Q0X_EXl29ntsdT2ADC3zubTEUGhVSU"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- AI Section -->
|
||||||
|
<section class="bg-surface-container-low rounded-2xl p-6 border border-outline-variant space-y-4">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">psychology</span>
|
||||||
|
<h3 class="text-title-sm font-headline-md text-on-surface">철거일 대기열 예측 (AI)</h3>
|
||||||
|
</div>
|
||||||
|
<span class="text-[10px] font-bold text-secondary-container bg-secondary/10 px-2 py-0.5 rounded-full">REAL-TIME</span>
|
||||||
|
</div>
|
||||||
|
<!-- Mini Bar Chart -->
|
||||||
|
<div class="h-24 flex items-end justify-between px-2 pt-2 border-b border-outline-variant/30">
|
||||||
|
<div class="w-3 bg-secondary/20 rounded-t h-[20%]"></div>
|
||||||
|
<div class="w-3 bg-secondary/20 rounded-t h-[30%]"></div>
|
||||||
|
<div class="w-3 bg-secondary/20 rounded-t h-[40%]"></div>
|
||||||
|
<div class="w-3 bg-secondary/60 rounded-t h-[70%]"></div>
|
||||||
|
<div class="w-3 bg-secondary rounded-t h-[95%]"></div>
|
||||||
|
<div class="w-3 bg-secondary rounded-t h-[100%]"></div>
|
||||||
|
<div class="w-3 bg-secondary/60 rounded-t h-[80%]"></div>
|
||||||
|
<div class="w-3 bg-secondary/30 rounded-t h-[50%]"></div>
|
||||||
|
<div class="w-3 bg-secondary/20 rounded-t h-[30%]"></div>
|
||||||
|
<div class="w-3 bg-secondary/20 rounded-t h-[20%]"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between px-1 text-[9px] text-outline">
|
||||||
|
<span>08:00</span>
|
||||||
|
<span>12:00</span>
|
||||||
|
<span>16:00</span>
|
||||||
|
<span>20:00</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white/60 backdrop-blur p-4 rounded-lg border-l-4 border-secondary flex space-x-3 items-start">
|
||||||
|
<span class="material-symbols-outlined text-secondary text-sm">info</span>
|
||||||
|
<p class="text-body-sm leading-relaxed text-on-surface">
|
||||||
|
철거 당일 <span class="font-bold text-secondary">오후 4시경</span> 차량 밀집도가 매우 높을 것으로 예상됩니다. 예약 분산을 권장합니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
// Simple interactivity for the toggle switch
|
||||||
|
document.querySelectorAll('button').forEach(btn => {
|
||||||
|
btn.addEventListener('click', function() {
|
||||||
|
if(this.parentElement.classList.contains('bg-surface-container-low')) {
|
||||||
|
this.parentElement.querySelectorAll('button').forEach(b => {
|
||||||
|
b.className = 'px-6 py-2 text-on-surface-variant hover:text-primary transition-all';
|
||||||
|
});
|
||||||
|
this.className = 'px-6 py-2 bg-white text-primary font-bold rounded shadow-sm border border-outline-variant';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
474
stitch_kintex_ai_system_architect/scr_26_auction_list/code.html
Normal file
474
stitch_kintex_ai_system_architect/scr_26_auction_list/code.html
Normal file
@ -0,0 +1,474 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="light" lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>SCR-26 Construction Auction List | KINTEX AI System</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@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"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
|
||||||
|
background-color: #faf8ff;
|
||||||
|
}
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: #dbe2fa;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.accent-border-primary { border-left: 4px solid #003765; }
|
||||||
|
.accent-border-secondary { border-left: 4px solid #5427e6; }
|
||||||
|
.accent-border-tertiary { border-left: 4px solid #00583b; }
|
||||||
|
</style>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"primary": "#003765",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"outline-variant": "#c2c7d1",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"outline": "#727781",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"on-tertiary-fixed": "#002113"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-md": "16px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"base": "4px",
|
||||||
|
"section-padding": "96px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"label-md": ["Geist"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface text-on-surface">
|
||||||
|
<!-- Top Navigation Bar -->
|
||||||
|
<header class="flex justify-between items-center h-16 px-gutter w-full sticky top-0 z-50 bg-surface border-b border-outline-variant">
|
||||||
|
<div class="flex items-center gap-stack-lg">
|
||||||
|
<span class="text-headline-md font-headline-md font-bold text-primary">KINTEX AI System</span>
|
||||||
|
<div class="h-6 w-px bg-outline-variant hidden md:block"></div>
|
||||||
|
<h1 class="text-title-sm font-title-sm text-on-surface-variant">옥션 관리 (SCR-26)</h1>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<nav class="hidden md:flex gap-stack-lg mr-stack-lg">
|
||||||
|
<a class="text-label-md font-label-md text-on-surface-variant hover:text-primary transition-colors" href="#">Auctions</a>
|
||||||
|
<a class="text-label-md font-label-md text-on-surface-variant hover:text-primary transition-colors" href="#">Exhibitors</a>
|
||||||
|
<a class="text-label-md font-label-md text-on-surface-variant hover:text-primary transition-colors" href="#">Resources</a>
|
||||||
|
</nav>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-full">
|
||||||
|
<span class="material-symbols-outlined">notifications</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-full">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
</button>
|
||||||
|
<button class="flex items-center gap-2 px-3 py-1.5 rounded-full border border-outline-variant hover:bg-surface-container-low transition-colors">
|
||||||
|
<span class="material-symbols-outlined">account_circle</span>
|
||||||
|
<span class="text-label-md font-label-md">Admin</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button class="ml-4 bg-primary text-on-primary px-6 py-2 rounded-full text-label-md font-label-md font-bold hover:bg-primary-container transition-opacity">Live Auction</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="flex min-h-[calc(100vh-64px)]">
|
||||||
|
<!-- Side Navigation Bar -->
|
||||||
|
<aside class="hidden md:flex flex-col h-[calc(100vh-64px)] py-stack-md bg-surface-container-low border-r border-outline-variant w-64 sticky top-16">
|
||||||
|
<div class="px-gutter mb-stack-lg">
|
||||||
|
<div class="flex items-center gap-3 p-3 bg-surface-container-lowest rounded-xl border border-outline-variant">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-primary-fixed flex items-center justify-center text-primary">
|
||||||
|
<span class="material-symbols-outlined">person</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-label-md font-label-md font-bold text-on-surface">Admin Console</p>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant">Exhibition Manager</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 space-y-1">
|
||||||
|
<a class="flex items-center gap-3 px-gutter py-3 text-on-surface-variant hover:bg-surface-container-high transition-transform duration-200 hover:translate-x-1" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="text-label-md font-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-gutter py-3 bg-secondary-fixed text-on-secondary-fixed rounded-r-full font-bold" href="#">
|
||||||
|
<span class="material-symbols-outlined">gavel</span>
|
||||||
|
<span class="text-label-md font-label-md">Auction</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-gutter py-3 text-on-surface-variant hover:bg-surface-container-high transition-transform duration-200 hover:translate-x-1" href="#">
|
||||||
|
<span class="material-symbols-outlined">calendar_today</span>
|
||||||
|
<span class="text-label-md font-label-md">Exhibition Schedule</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-gutter py-3 text-on-surface-variant hover:bg-surface-container-high transition-transform duration-200 hover:translate-x-1" href="#">
|
||||||
|
<span class="material-symbols-outlined">domain</span>
|
||||||
|
<span class="text-label-md font-label-md">Hall Operations</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-gutter py-3 text-on-surface-variant hover:bg-surface-container-high transition-transform duration-200 hover:translate-x-1" href="#">
|
||||||
|
<span class="material-symbols-outlined">analytics</span>
|
||||||
|
<span class="text-label-md font-label-md">Reports</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="px-gutter mt-auto pt-stack-md border-t border-outline-variant/30">
|
||||||
|
<a class="flex items-center gap-3 py-2 text-on-surface-variant hover:text-primary" href="#">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">help</span>
|
||||||
|
<span class="text-label-md font-label-md">Support</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 py-2 text-on-surface-variant hover:text-primary" href="#">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">settings</span>
|
||||||
|
<span class="text-label-md font-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
<button class="w-full mt-4 bg-secondary text-on-secondary py-3 rounded-xl font-bold text-label-md hover:bg-secondary-container transition-all flex items-center justify-center gap-2">
|
||||||
|
<span class="material-symbols-outlined">add_circle</span>
|
||||||
|
New Auction
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<main class="flex-1 p-gutter max-w-[1440px] mx-auto grid grid-cols-12 gap-gutter">
|
||||||
|
<!-- List Section (Left Column) -->
|
||||||
|
<div class="col-span-12 lg:col-span-8 space-y-stack-lg">
|
||||||
|
<!-- Filter Tabs & Create Button -->
|
||||||
|
<div class="flex items-center justify-between bg-surface-container-lowest p-stack-sm rounded-xl border border-outline-variant shadow-sm">
|
||||||
|
<div class="flex gap-2 p-1 bg-surface-container-low rounded-lg">
|
||||||
|
<button class="px-6 py-2 rounded-md bg-surface-container-lowest text-primary font-bold shadow-sm text-label-md">진행중</button>
|
||||||
|
<button class="px-6 py-2 rounded-md text-on-surface-variant hover:bg-surface-container-high text-label-md transition-colors">마감</button>
|
||||||
|
<button class="px-6 py-2 rounded-md text-on-surface-variant hover:bg-surface-container-high text-label-md transition-colors">내가 개설</button>
|
||||||
|
</div>
|
||||||
|
<button class="flex items-center gap-2 bg-primary text-on-primary px-6 py-2.5 rounded-lg font-bold text-label-md hover:shadow-lg transition-all">
|
||||||
|
<span class="material-symbols-outlined">add</span>
|
||||||
|
옥션 개설
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Auction Cards List -->
|
||||||
|
<div class="space-y-stack-md">
|
||||||
|
<!-- Card 1 -->
|
||||||
|
<div class="bg-surface-container-lowest rounded-xl border border-outline-variant overflow-hidden hover:shadow-md transition-all accent-border-primary">
|
||||||
|
<div class="p-gutter">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="px-2.5 py-0.5 bg-primary-fixed text-on-primary-fixed rounded-full text-label-xs font-label-xs">전시디자인설치</span>
|
||||||
|
<span class="px-2.5 py-0.5 bg-secondary-fixed text-on-secondary-fixed rounded-full text-label-xs font-label-xs">역경매</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-headline-md font-headline-md text-on-surface">A-102 독립부스 시공</h3>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-end gap-2">
|
||||||
|
<span class="px-3 py-1 bg-error text-on-error rounded-md text-label-md font-bold">마감 D-2</span>
|
||||||
|
<span class="px-3 py-1 bg-tertiary-fixed text-on-tertiary-fixed rounded-md text-label-md">진행중</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4 py-4 border-y border-outline-variant/30 mb-4">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface-variant">응찰 현황</span>
|
||||||
|
<span class="text-title-sm font-title-sm font-bold text-on-surface">5개 업체 응찰 중</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-end">
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface-variant">현재 최저가</span>
|
||||||
|
<span class="text-headline-md font-headline-md font-bold text-primary">₩8,400,000</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<div class="flex items-center gap-1.5 text-secondary">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">layers</span>
|
||||||
|
<span class="text-label-md font-label-md">배치 (Layout)</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1.5 text-secondary">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">architecture</span>
|
||||||
|
<span class="text-label-md font-label-md">설계 (Design)</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1.5 text-secondary">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">description</span>
|
||||||
|
<span class="text-label-md font-label-md">물량서 (BOQ)</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1.5 text-secondary">
|
||||||
|
<span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
<span class="text-label-md font-label-md font-bold">AI Preview</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="px-4 py-2 border border-primary text-primary rounded-lg font-bold text-label-md hover:bg-primary-fixed transition-colors">상세보기</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 2 -->
|
||||||
|
<div class="bg-surface-container-lowest rounded-xl border border-outline-variant overflow-hidden hover:shadow-md transition-all accent-border-secondary">
|
||||||
|
<div class="p-gutter">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="px-2.5 py-0.5 bg-primary-fixed text-on-primary-fixed rounded-full text-label-xs font-label-xs">구조물 임대</span>
|
||||||
|
<span class="px-2.5 py-0.5 bg-secondary-fixed text-on-secondary-fixed rounded-full text-label-xs font-label-xs">역경매</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-headline-md font-headline-md text-on-surface">B-405 트러스 구조물 설치</h3>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-end gap-2">
|
||||||
|
<span class="px-3 py-1 bg-error text-on-error rounded-md text-label-md font-bold">마감 D-1</span>
|
||||||
|
<span class="px-3 py-1 bg-tertiary-fixed text-on-tertiary-fixed rounded-md text-label-md">진행중</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4 py-4 border-y border-outline-variant/30 mb-4">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface-variant">응찰 현황</span>
|
||||||
|
<span class="text-title-sm font-title-sm font-bold text-on-surface">12개 업체 응찰 중</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-end">
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface-variant">현재 최저가</span>
|
||||||
|
<span class="text-headline-md font-headline-md font-bold text-primary">₩4,250,000</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<div class="flex items-center gap-1.5 text-secondary">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">layers</span>
|
||||||
|
<span class="text-label-md font-label-md">배치</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1.5 text-secondary">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">description</span>
|
||||||
|
<span class="text-label-md font-label-md">물량서</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="px-4 py-2 border border-primary text-primary rounded-lg font-bold text-label-md hover:bg-primary-fixed transition-colors">상세보기</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 3 -->
|
||||||
|
<div class="bg-surface-container-lowest rounded-xl border border-outline-variant overflow-hidden hover:shadow-md transition-all accent-border-tertiary opacity-80">
|
||||||
|
<div class="p-gutter">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="px-2.5 py-0.5 bg-surface-variant text-on-surface-variant rounded-full text-label-xs font-label-xs">전기/조명</span>
|
||||||
|
<span class="px-2.5 py-0.5 bg-surface-variant text-on-surface-variant rounded-full text-label-xs font-label-xs">역경매</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-headline-md font-headline-md text-on-surface">C-10 공용 통로 조명 공사</h3>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-end gap-2">
|
||||||
|
<span class="px-3 py-1 bg-surface-variant text-on-surface-variant rounded-md text-label-md font-bold">마감 완료</span>
|
||||||
|
<span class="px-3 py-1 bg-surface-container-high text-on-surface-variant rounded-md text-label-md">정산 중</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4 py-4 border-y border-outline-variant/30 mb-4">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface-variant">낙찰 업체</span>
|
||||||
|
<span class="text-title-sm font-title-sm font-bold text-on-surface">(주)테크라이팅</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-end">
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface-variant">최종 낙찰가</span>
|
||||||
|
<span class="text-headline-md font-headline-md font-bold text-on-surface-variant">₩12,000,000</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Sidebar (Right Column) -->
|
||||||
|
<div class="col-span-12 lg:col-span-4">
|
||||||
|
<div class="bg-surface-container-lowest rounded-xl border border-outline-variant shadow-lg sticky top-24 overflow-hidden">
|
||||||
|
<div class="p-stack-lg bg-primary text-on-primary">
|
||||||
|
<h2 class="text-title-sm font-title-sm font-bold flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined">add_box</span>
|
||||||
|
옥션 개설 (Open Auction)
|
||||||
|
</h2>
|
||||||
|
<p class="text-body-sm font-body-sm opacity-90 mt-1">새로운 시공 옥션을 공고하고 협력사를 모집합니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-gutter space-y-stack-lg custom-scrollbar max-h-[716px] overflow-y-auto">
|
||||||
|
<!-- Basic Info -->
|
||||||
|
<div class="space-y-stack-sm">
|
||||||
|
<label class="text-label-md font-label-md text-on-surface-variant">카테고리 선택</label>
|
||||||
|
<select class="w-full border-outline-variant rounded-lg bg-surface-container-low text-body-base focus:ring-primary focus:border-primary">
|
||||||
|
<option>전시디자인설치</option>
|
||||||
|
<option>구조물 임대</option>
|
||||||
|
<option>전기/조명</option>
|
||||||
|
<option>영상/음향</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<!-- Award Criteria -->
|
||||||
|
<div class="space-y-stack-sm">
|
||||||
|
<label class="text-label-md font-label-md text-on-surface-variant">낙찰 기준 (Award Criteria)</label>
|
||||||
|
<div class="flex p-1 bg-surface-container-low rounded-lg border border-outline-variant">
|
||||||
|
<button class="flex-1 py-2 text-label-md rounded-md transition-all hover:bg-surface-container-high">최저가</button>
|
||||||
|
<button class="flex-1 py-2 text-label-md rounded-md bg-white shadow-sm font-bold text-primary">종합평가</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Weights (Visible for Comprehensive) -->
|
||||||
|
<div class="p-stack-md bg-secondary-fixed/30 rounded-xl space-y-4 border border-secondary-fixed">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<div class="flex justify-between text-label-xs font-label-xs text-on-secondary-fixed-variant">
|
||||||
|
<span>가격 평가</span>
|
||||||
|
<span class="font-bold">60%</span>
|
||||||
|
</div>
|
||||||
|
<input class="w-full h-1.5 bg-surface-container-high rounded-lg appearance-none cursor-pointer accent-secondary" type="range" value="60"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<div class="flex justify-between text-label-xs font-label-xs text-on-secondary-fixed-variant">
|
||||||
|
<span>평판/경력</span>
|
||||||
|
<span class="font-bold">25%</span>
|
||||||
|
</div>
|
||||||
|
<input class="w-full h-1.5 bg-surface-container-high rounded-lg appearance-none cursor-pointer accent-secondary" type="range" value="25"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<div class="flex justify-between text-label-xs font-label-xs text-on-secondary-fixed-variant">
|
||||||
|
<span>납기/준수</span>
|
||||||
|
<span class="font-bold">15%</span>
|
||||||
|
</div>
|
||||||
|
<input class="w-full h-1.5 bg-surface-container-high rounded-lg appearance-none cursor-pointer accent-secondary" type="range" value="15"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Round & Deadline -->
|
||||||
|
<div class="grid grid-cols-2 gap-stack-md">
|
||||||
|
<div class="space-y-stack-sm">
|
||||||
|
<label class="text-label-md font-label-md text-on-surface-variant">차수 (Round)</label>
|
||||||
|
<input class="w-full border-outline-variant rounded-lg bg-surface-container-low text-body-base" type="text" value="1차"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-stack-sm">
|
||||||
|
<label class="text-label-md font-label-md text-on-surface-variant">마감 기한</label>
|
||||||
|
<input class="w-full border-outline-variant rounded-lg bg-surface-container-low text-body-base" type="date"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- AI Attachment Picker -->
|
||||||
|
<div class="space-y-stack-sm">
|
||||||
|
<label class="text-label-md font-label-md text-on-surface-variant">설계 데이터 연동</label>
|
||||||
|
<button class="w-full flex flex-col items-center justify-center p-6 border-2 border-dashed border-secondary-container bg-secondary-container/5 rounded-xl hover:bg-secondary-container/10 transition-all group">
|
||||||
|
<span class="material-symbols-outlined text-[32px] text-secondary mb-2 group-hover:scale-110 transition-transform" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
<span class="text-label-md font-bold text-secondary">M2~M5 자료 첨부</span>
|
||||||
|
<span class="text-label-xs text-on-surface-variant mt-1">도면, BOQ, AI 렌더링 포함</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Contractor Invitation -->
|
||||||
|
<div class="space-y-stack-sm">
|
||||||
|
<label class="text-label-md font-label-md text-on-surface-variant flex justify-between">
|
||||||
|
협력사 초대
|
||||||
|
<span class="text-label-xs text-error font-normal">등록업체만 초대 가능</span>
|
||||||
|
</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input class="w-full pl-10 border-outline-variant rounded-lg bg-surface-container-low text-body-base" placeholder="업체명 검색..." type="text"/>
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-2.5 text-on-surface-variant text-[20px]">search</span>
|
||||||
|
</div>
|
||||||
|
<div class="max-h-32 overflow-y-auto border border-outline-variant rounded-lg divide-y divide-outline-variant/30">
|
||||||
|
<div class="p-2 flex items-center justify-between hover:bg-surface-container-low">
|
||||||
|
<span class="text-body-sm">(주)에이치디자인</span>
|
||||||
|
<input checked="" class="rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-2 flex items-center justify-between hover:bg-surface-container-low">
|
||||||
|
<span class="text-body-sm">(주)공간창작</span>
|
||||||
|
<input class="rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-2 flex items-center justify-between hover:bg-surface-container-low">
|
||||||
|
<span class="text-body-sm">K-전시산업</span>
|
||||||
|
<input class="rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Final CTA -->
|
||||||
|
<div class="p-gutter border-t border-outline-variant bg-surface-container-low">
|
||||||
|
<button class="w-full bg-primary text-on-primary py-4 rounded-xl font-bold text-title-sm hover:bg-primary-container transition-all shadow-md active:scale-[0.98]">
|
||||||
|
옥션 공고 게시
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<!-- Floating Tooltip / Micro-interaction layer -->
|
||||||
|
<div class="fixed bottom-8 right-8 flex items-center gap-3 px-4 py-3 bg-on-surface text-surface rounded-full shadow-2xl transition-all translate-y-20 opacity-0" id="ai-status-indicator">
|
||||||
|
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
<span class="text-label-md font-label-md">AI 분석: 현재 응찰가는 시장 평균 대비 5% 낮음</span>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
// Simple entrance animation for the AI indicator
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const indicator = document.getElementById('ai-status-indicator');
|
||||||
|
indicator.classList.remove('translate-y-20', 'opacity-0');
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hover effect for auction cards
|
||||||
|
document.querySelectorAll('.accent-border-primary, .accent-border-secondary').forEach(card => {
|
||||||
|
card.addEventListener('mouseenter', () => {
|
||||||
|
card.classList.add('shadow-xl', '-translate-y-1');
|
||||||
|
});
|
||||||
|
card.addEventListener('mouseleave', () => {
|
||||||
|
card.classList.remove('shadow-xl', '-translate-y-1');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,370 @@
|
|||||||
|
<!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 AI System - Auction Detail</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@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"/>
|
||||||
|
<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": {
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"outline-variant": "#c2c7d1",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"outline": "#727781",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"primary": "#003765",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"error": "#ba1a1a"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"gutter": "16px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"section-padding": "96px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"label-xs": ["Geist"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: #c1c7d3;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.glass-overlay {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
.active-tab-indicator {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #003765;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-surface font-body-base antialiased">
|
||||||
|
<!-- TopNavBar (Shared Component) -->
|
||||||
|
<nav class="flex justify-between items-center h-16 px-gutter w-full sticky top-0 z-50 bg-surface border-b border-outline-variant">
|
||||||
|
<div class="flex items-center gap-8">
|
||||||
|
<span class="text-headline-md font-headline-md font-bold text-primary">KINTEX AI System</span>
|
||||||
|
<div class="hidden md:flex items-center gap-6">
|
||||||
|
<a class="text-primary border-b-2 border-primary pb-1 font-label-md text-label-md" href="#">Auctions</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-label-md text-label-md" href="#">Exhibitors</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-label-md text-label-md" href="#">Resources</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="relative flex items-center bg-surface-container-low rounded-full px-4 py-1.5 border border-outline-variant">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant text-[20px]">search</span>
|
||||||
|
<input class="bg-transparent border-none focus:ring-0 text-sm w-48 ml-2" placeholder="검색" type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="p-2 hover:bg-surface-container-low rounded-full transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant">notifications</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-2 hover:bg-surface-container-low rounded-full transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant">settings</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-2 hover:bg-surface-container-low rounded-full transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant">account_circle</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button class="ml-2 px-6 py-2 bg-primary text-white font-label-md text-label-md rounded-full hover:bg-primary-container transition-all active:opacity-80">
|
||||||
|
Live Auction
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div class="flex h-[calc(100vh-64px)] overflow-hidden">
|
||||||
|
<!-- SideNavBar (Shared Component) -->
|
||||||
|
<aside class="w-64 bg-surface-container-low border-r border-outline-variant flex flex-col py-stack-md shrink-0">
|
||||||
|
<div class="px-6 mb-8">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant overflow-hidden">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A professional corporate headshot of a business manager wearing a dark suit, set against a clean, softly lit studio background. The style is modern and authoritative, with neutral lighting and a high-end professional aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBs8MrUZOIgnGLPxnHqFP8UV37C_96Jl5YRx9lM7D-YxvMsHCwFSE6i70M2NvCBa5r64WGoWx7g-QknzfvFVCRHz_OUlvqHcF7EaqxaFLuCAbT9Py0i4jyxa2A_5QGXJigyW3QamPog3unhnYRl7R3uw1Q1Pe6qu9wMo0YjYsilU4TwibWHZ6xmkpMwAPuT1m-CAzox4ZxFMCMaNp-y-kQURZov6z2rnK5EF-ClUWhCXAfsqI6ORLmwpvHAvlsW773l3x2RjJ5cGGM"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-title-sm font-title-sm text-on-surface">Admin Console</p>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant">Exhibition Manager</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 space-y-1">
|
||||||
|
<a class="flex items-center gap-3 px-6 py-3 text-on-surface-variant hover:bg-surface-container-high transition-transform duration-200 hover:translate-x-1" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="text-label-md font-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-6 py-3 bg-secondary-fixed text-on-secondary-fixed rounded-r-full font-bold" href="#">
|
||||||
|
<span class="material-symbols-outlined">calendar_today</span>
|
||||||
|
<span class="text-label-md font-label-md">Exhibition Schedule</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-6 py-3 text-on-surface-variant hover:bg-surface-container-high transition-transform duration-200 hover:translate-x-1" href="#">
|
||||||
|
<span class="material-symbols-outlined">domain</span>
|
||||||
|
<span class="text-label-md font-label-md">Hall Operations</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-6 py-3 text-on-surface-variant hover:bg-surface-container-high transition-transform duration-200 hover:translate-x-1" href="#">
|
||||||
|
<span class="material-symbols-outlined">gavel</span>
|
||||||
|
<span class="text-label-md font-label-md">Bidding History</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-6 py-3 text-on-surface-variant hover:bg-surface-container-high transition-transform duration-200 hover:translate-x-1" href="#">
|
||||||
|
<span class="material-symbols-outlined">analytics</span>
|
||||||
|
<span class="text-label-md font-label-md">Reports</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="px-4 mt-auto mb-6">
|
||||||
|
<button class="w-full py-3 bg-primary text-white rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-primary-container transition-transform active:scale-95 shadow-md">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">add</span>
|
||||||
|
New Auction
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="pt-4 border-t border-outline-variant">
|
||||||
|
<a class="flex items-center gap-3 px-6 py-2 text-on-surface-variant hover:bg-surface-container-high transition-transform duration-200 hover:translate-x-1" href="#">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">help</span>
|
||||||
|
<span class="text-label-md font-label-md">Support</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-6 py-2 text-on-surface-variant hover:bg-surface-container-high transition-transform duration-200 hover:translate-x-1" href="#">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">settings</span>
|
||||||
|
<span class="text-label-md font-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<main class="flex-1 flex flex-col min-w-0 bg-surface-bright">
|
||||||
|
<!-- Auction Header Section -->
|
||||||
|
<header class="bg-surface-container-lowest border-b border-outline-variant px-container-padding h-20 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="bg-error-red text-white px-3 py-1 rounded text-label-xs font-bold animate-pulse">실시간</span>
|
||||||
|
<h1 class="text-headline-md font-headline-md text-on-surface">A-102 독립부스 시공 | 역경매 | 라운드 2</h1>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<div class="flex flex-col items-end">
|
||||||
|
<span class="text-label-xs text-on-surface-variant uppercase tracking-wider">상태</span>
|
||||||
|
<span class="text-label-md font-bold text-tertiary">활성 응찰 중</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-8 w-px bg-outline-variant"></div>
|
||||||
|
<div class="flex flex-col items-end">
|
||||||
|
<span class="text-label-xs text-on-surface-variant uppercase tracking-wider">현재 최저가</span>
|
||||||
|
<span class="text-title-sm font-bold text-primary">₩8,400,000</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Layout Grid -->
|
||||||
|
<div class="flex-1 flex overflow-hidden">
|
||||||
|
<!-- Left: Reference Viewer (2/3) -->
|
||||||
|
<section class="w-2/3 flex flex-col border-r border-outline-variant">
|
||||||
|
<!-- Tab Bar -->
|
||||||
|
<div class="flex bg-surface-container px-container-padding gap-8 h-12">
|
||||||
|
<button class="relative h-full flex items-center text-on-surface-variant font-label-md hover:text-primary transition-colors">
|
||||||
|
배치도
|
||||||
|
</button>
|
||||||
|
<button class="relative h-full flex items-center text-on-surface-variant font-label-md hover:text-primary transition-colors">
|
||||||
|
부스 설계안
|
||||||
|
</button>
|
||||||
|
<button class="relative h-full flex items-center text-on-surface-variant font-label-md hover:text-primary transition-colors">
|
||||||
|
물량서(BOQ)
|
||||||
|
</button>
|
||||||
|
<button class="relative h-full flex items-center text-primary font-bold font-label-md">
|
||||||
|
예상 이미지
|
||||||
|
<div class="active-tab-indicator"></div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Image Display Area -->
|
||||||
|
<div class="flex-1 bg-black relative group overflow-hidden">
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A photorealistic architectural visualization of a high-tech KINTEX exhibition booth for Hanbit Robotics. The booth features sleek metallic curves, glowing integrated blue LED accent lighting, and multiple robotic arm demonstrations on pedestals. Large digital screens display technical data, and professional attendees are scattered around the spacious, modern layout. The lighting is crisp and cool, reflecting a futuristic, corporate innovation vibe." src="https://lh3.googleusercontent.com/aida/AP1WRLv3H3Wpe0zBHSuxQpTcXDcpOdolguqYeCc-O6Er1f1v7kIW1OvM8jO7ML3Duw169HILHRn6lMMYiX7cmJr_Ym05mrjgXagaQQtoAwQ3TIC3ZyZ7Bg-e42UBTkKt_wIydOFlskhmY6h5XTNmXwnDqY17JnXhXpY9NLdpPzY080hy03Mi5oNj1b3jZGV5WGcflIMxg6M49tHGG6P0pJY7mBYNrf9Lbn9jeoGeFbtHqCltSbrfa0LqRPTzk68"/>
|
||||||
|
</div>
|
||||||
|
<!-- Watermark -->
|
||||||
|
<div class="absolute bottom-6 right-8 text-white/40 text-label-xs italic pointer-events-none">
|
||||||
|
AI 생성 예상 이미지
|
||||||
|
</div>
|
||||||
|
<!-- Zoom/Fullscreen Controls Overlay -->
|
||||||
|
<div class="absolute top-6 right-6 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||||
|
<button class="w-10 h-10 glass-overlay rounded-lg flex items-center justify-center text-primary shadow-sm hover:scale-105 transition-transform">
|
||||||
|
<span class="material-symbols-outlined">zoom_in</span>
|
||||||
|
</button>
|
||||||
|
<button class="w-10 h-10 glass-overlay rounded-lg flex items-center justify-center text-primary shadow-sm hover:scale-105 transition-transform">
|
||||||
|
<span class="material-symbols-outlined">fullscreen</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Right: Live Ranking Panel (1/3) -->
|
||||||
|
<section class="w-1/3 flex flex-col bg-surface-container-low">
|
||||||
|
<!-- Title & Toggle -->
|
||||||
|
<div class="p-container-padding flex items-center justify-between">
|
||||||
|
<h2 class="text-title-sm font-bold text-on-surface flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">leaderboard</span>
|
||||||
|
실시간 순위
|
||||||
|
</h2>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-label-md text-on-surface-variant">익명 순위</span>
|
||||||
|
<button class="w-10 h-5 bg-primary-container rounded-full relative flex items-center px-1">
|
||||||
|
<div class="w-3.5 h-3.5 bg-white rounded-full translate-x-4 transition-transform"></div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Ranking List -->
|
||||||
|
<div class="flex-1 px-container-padding overflow-y-auto custom-scrollbar">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<!-- 1st Place -->
|
||||||
|
<div class="bg-surface-container-lowest p-5 rounded-xl border border-outline-variant flex items-center gap-4 hover:shadow-md transition-all border-l-4 border-l-primary">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-primary-fixed flex items-center justify-center shrink-0">
|
||||||
|
<span class="text-primary font-bold">1</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-label-md font-bold text-on-surface">업체 A</p>
|
||||||
|
<p class="text-title-sm font-bold text-primary">₩8,400,000</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<span class="text-label-xs px-2 py-0.5 bg-tertiary-fixed text-on-tertiary-fixed rounded-full">최저가</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 2nd Place (User Highlight) -->
|
||||||
|
<div class="bg-secondary-fixed/30 p-5 rounded-xl border-2 border-secondary-container flex items-center gap-4 hover:shadow-md transition-all scale-[1.02]">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center shrink-0">
|
||||||
|
<span class="text-white font-bold">2</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-label-md font-bold text-secondary">나의 응찰 (ME)</p>
|
||||||
|
<p class="text-title-sm font-bold text-secondary-container">₩8,700,000</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-right flex flex-col items-end gap-1">
|
||||||
|
<span class="text-label-xs px-2 py-0.5 bg-secondary-container text-white rounded-full">나의 순위</span>
|
||||||
|
<p class="text-label-xs text-secondary-container font-bold">+ 300,000</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 3rd Place -->
|
||||||
|
<div class="bg-surface-container-lowest p-5 rounded-xl border border-outline-variant flex items-center gap-4 hover:shadow-md transition-all">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center shrink-0">
|
||||||
|
<span class="text-on-surface-variant font-bold">3</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-label-md font-bold text-on-surface">업체 C</p>
|
||||||
|
<p class="text-title-sm font-bold text-on-surface">₩8,900,000</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Other placeholders for density -->
|
||||||
|
<div class="opacity-40 bg-surface-container-lowest p-4 rounded-xl border border-outline-variant border-dashed flex items-center gap-4">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container flex items-center justify-center shrink-0">
|
||||||
|
<span class="text-on-surface-variant text-xs font-bold">4</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 h-4 bg-surface-container rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Footer Controls -->
|
||||||
|
<div class="p-container-padding bg-surface-container border-t border-outline-variant space-y-4">
|
||||||
|
<div class="flex flex-col items-center bg-white/50 rounded-xl py-4 border border-outline-variant/50">
|
||||||
|
<span class="text-label-xs text-on-surface-variant font-bold uppercase tracking-[0.2em] mb-1">라운드 종료까지</span>
|
||||||
|
<div class="flex items-baseline gap-2">
|
||||||
|
<span class="text-[32px] font-bold text-primary tracking-tighter" id="countdown">01:24:36</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="w-full py-4 bg-primary text-white rounded-xl font-bold text-title-sm flex items-center justify-center gap-3 hover:bg-primary-container shadow-xl active:scale-[0.98] transition-all">
|
||||||
|
<span class="material-symbols-outlined">edit_note</span>
|
||||||
|
견적서 작성 · 재응찰
|
||||||
|
</button>
|
||||||
|
<p class="text-[11px] text-on-surface-variant text-center px-4">
|
||||||
|
* 재응찰 시 이전 응찰 정보는 자동으로 대체됩니다. 입찰 보증금은 KINTEX AI 에스크로 시스템에 보관됩니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
// Simple countdown logic for visual effect
|
||||||
|
let timeLeft = 5076; // 01:24:36 in seconds
|
||||||
|
const countdownEl = document.getElementById('countdown');
|
||||||
|
|
||||||
|
function updateCountdown() {
|
||||||
|
const h = Math.floor(timeLeft / 3600);
|
||||||
|
const m = Math.floor((timeLeft % 3600) / 60);
|
||||||
|
const s = timeLeft % 60;
|
||||||
|
|
||||||
|
countdownEl.textContent =
|
||||||
|
`${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
|
||||||
|
|
||||||
|
if (timeLeft > 0) timeLeft--;
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(updateCountdown, 1000);
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
461
stitch_kintex_ai_system_architect/scr_29_award_compare/code.html
Normal file
461
stitch_kintex_ai_system_architect/scr_29_award_compare/code.html
Normal file
@ -0,0 +1,461 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="light" lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>SCR-29 Award Comparison and Selection - KINTEX AI System</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;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"/>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"primary": "#003765",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"outline": "#727781",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"success-accent": "#0E8A5F",
|
||||||
|
"ai-accent": "#6D4AFF"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"section-padding": "96px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"title-sm": ["Inter"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
.bento-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(12, 1fr);
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-surface font-body-base">
|
||||||
|
<!-- Sidebar Navigation -->
|
||||||
|
<aside class="fixed left-0 top-0 h-full w-64 bg-surface-container dark:bg-surface-container-highest border-r border-outline-variant flex flex-col py-stack-lg z-50">
|
||||||
|
<div class="px-6 mb-8">
|
||||||
|
<div class="flex items-center gap-3 mb-2">
|
||||||
|
<img alt="KINTEX Logo" class="h-8" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD2uFbO3hsi6PdyRzy9wGZT5p3cB4GLFaPvgwa2hSZwLGtZnGItAfHsy-sLZAsVLRR8GUsODMkbR9FfxkNArjLgmJuS8uuCA9CTFbm6kOg-O-Jj0UXGORfPVCjHME1lp4KqBmB6o74N6btUDC6H9XXip92mK7EpkmvdH7QS-yJ_LL7W-xACAEYeAuOXeKaG6LuhUUsv2xdUZTZjjFD8dDz19wbQraGkMuDaUpKh8ot7eEJrQx70l5kdlBeLyc80bRgz3vBo1xdRi5s"/>
|
||||||
|
<span class="font-headline-md text-headline-md font-bold text-primary">KINTEX</span>
|
||||||
|
</div>
|
||||||
|
<p class="font-label-md text-label-md text-on-surface-variant">Management Portal</p>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 px-3 space-y-1">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer hover:bg-surface-container-high transition-all text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="font-label-md text-label-md">Dashboard</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer hover:bg-surface-container-high transition-all text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined">calendar_today</span>
|
||||||
|
<span class="font-label-md text-label-md">Schedule</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-primary-fixed text-primary font-bold border-l-4 border-primary">
|
||||||
|
<span class="material-symbols-outlined">gavel</span>
|
||||||
|
<span class="font-label-md text-label-md">Auction</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer hover:bg-surface-container-high transition-all text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined">domain</span>
|
||||||
|
<span class="font-label-md text-label-md">Hall Operations</span>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div class="mt-auto px-3 border-t border-outline-variant pt-6">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer hover:bg-surface-container-high transition-all text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined">contact_support</span>
|
||||||
|
<span class="font-label-md text-label-md">Support</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer hover:bg-surface-container-high transition-all text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span class="font-label-md text-label-md">Settings</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Top Navigation Bar -->
|
||||||
|
<header class="fixed top-0 left-64 right-0 h-16 bg-surface-bright border-b border-outline-variant flex justify-between items-center px-container-padding z-40">
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<div class="flex items-center gap-2 bg-surface-container-low px-4 py-1.5 rounded-full border border-outline-variant">
|
||||||
|
<span class="material-symbols-outlined text-outline">search</span>
|
||||||
|
<input class="bg-transparent border-none focus:ring-0 text-body-base w-64" placeholder="입찰 번호 또는 전시회 검색" type="text"/>
|
||||||
|
</div>
|
||||||
|
<nav class="hidden md:flex gap-6">
|
||||||
|
<a class="text-primary font-bold border-b-2 border-primary py-4" href="#">Global View</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors py-4" href="#">Analytics</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors py-4" href="#">Reports</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors py-4" href="#">Settings</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-surface-container transition-all">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant">notifications</span>
|
||||||
|
</button>
|
||||||
|
<button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-surface-container transition-all">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant">help</span>
|
||||||
|
</button>
|
||||||
|
<div class="flex items-center gap-2 cursor-pointer active:scale-95 transition-all">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary-container flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-on-primary-container text-[20px]">account_circle</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-label-md text-label-md">Exhibition Manager</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<main class="ml-64 pt-16 flex min-h-screen">
|
||||||
|
<div class="flex-1 p-stack-lg max-w-[calc(100%-360px)]">
|
||||||
|
<!-- Page Header -->
|
||||||
|
<div class="mb-8 flex justify-between items-end">
|
||||||
|
<div>
|
||||||
|
<nav class="flex items-center gap-2 text-label-xs text-on-surface-variant mb-2">
|
||||||
|
<span>Auction Management</span>
|
||||||
|
<span class="material-symbols-outlined text-[12px]">chevron_right</span>
|
||||||
|
<span>Quotation Comparison</span>
|
||||||
|
</nav>
|
||||||
|
<h1 class="font-display-lg text-display-lg text-primary mb-2">SCR-29 역경매 응찰 비교 및 낙찰</h1>
|
||||||
|
<div class="flex items-center gap-4 mt-4">
|
||||||
|
<div class="px-4 py-2 bg-surface-container rounded-lg border-l-4 border-primary">
|
||||||
|
<p class="text-label-xs text-on-surface-variant">공고명</p>
|
||||||
|
<p class="font-title-sm text-title-sm">A-102 독립부스 시공</p>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-2 bg-surface-container rounded-lg border-l-4 border-secondary">
|
||||||
|
<p class="text-label-xs text-on-surface-variant">응찰 현황</p>
|
||||||
|
<p class="font-title-sm text-title-sm">총 5개사 참여</p>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-2 bg-surface-container rounded-lg border-l-4 border-tertiary">
|
||||||
|
<p class="text-label-xs text-on-surface-variant">낙찰기준</p>
|
||||||
|
<p class="font-title-sm text-title-sm">종합평가 (가격 40% + 역량 60%)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="bg-surface-container-low border border-outline-variant px-4 py-2 rounded-xl flex items-center gap-2 font-label-md hover:bg-surface-container-high transition-all">
|
||||||
|
<span class="material-symbols-outlined">download</span>
|
||||||
|
응찰서 원본 다운로드
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Comparison Matrix -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm">
|
||||||
|
<table class="w-full text-left border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr class="bg-surface-container-low border-b border-outline-variant">
|
||||||
|
<th class="p-6 font-label-md text-on-surface-variant w-1/4">비교 항목</th>
|
||||||
|
<th class="p-6 font-headline-md text-headline-md text-primary text-center relative">
|
||||||
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 px-3 py-1 bg-primary text-white text-[10px] font-bold rounded-b-lg">최적 추천</div>
|
||||||
|
업체 A
|
||||||
|
<span class="block text-label-xs font-normal text-on-surface-variant mt-1">종합 1위 (추천)</span>
|
||||||
|
</th>
|
||||||
|
<th class="p-6 font-headline-md text-headline-md text-on-surface text-center">
|
||||||
|
업체 B
|
||||||
|
<span class="block text-label-xs font-normal text-on-surface-variant mt-1">종합 2위</span>
|
||||||
|
</th>
|
||||||
|
<th class="p-6 font-headline-md text-headline-md text-on-surface text-center">
|
||||||
|
업체 C
|
||||||
|
<span class="block text-label-xs font-normal text-on-surface-variant mt-1">종합 3위</span>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="border-b border-outline-variant hover:bg-surface-container-low transition-colors">
|
||||||
|
<td class="p-6 font-title-sm text-title-sm">총액 (VAT 별도)</td>
|
||||||
|
<td class="p-6 text-center text-success-accent font-bold bg-success-accent/5">
|
||||||
|
<span class="text-headline-md">₩8,400,000</span>
|
||||||
|
<div class="mt-1 flex items-center justify-center gap-1 text-label-xs">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">arrow_downward</span> 최저가
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-6 text-center">
|
||||||
|
<span class="text-title-sm">₩8,700,000</span>
|
||||||
|
<div class="mt-1 text-label-xs text-on-surface-variant">+3.5% 차이</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-6 text-center">
|
||||||
|
<span class="text-title-sm">₩8,900,000</span>
|
||||||
|
<div class="mt-1 text-label-xs text-on-surface-variant">+5.9% 차이</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="border-b border-outline-variant hover:bg-surface-container-low transition-colors">
|
||||||
|
<td class="p-6 font-title-sm text-title-sm">납기 (시공 완료)</td>
|
||||||
|
<td class="p-6 text-center text-on-surface">12일</td>
|
||||||
|
<td class="p-6 text-center text-success-accent font-bold bg-success-accent/5">
|
||||||
|
<span class="text-title-sm">10일</span>
|
||||||
|
<div class="mt-1 flex items-center justify-center gap-1 text-label-xs">
|
||||||
|
최단 납기
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-6 text-center text-on-surface">14일</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="border-b border-outline-variant hover:bg-surface-container-low transition-colors">
|
||||||
|
<td class="p-6 font-title-sm text-title-sm">업체 평판 (최근 1년)</td>
|
||||||
|
<td class="p-6 text-center text-success-accent font-bold bg-success-accent/5">
|
||||||
|
<div class="flex items-center justify-center gap-1 text-title-sm">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||||
|
4.8
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-6 text-center">
|
||||||
|
<div class="flex items-center justify-center gap-1 text-on-surface">
|
||||||
|
<span class="material-symbols-outlined">star</span>
|
||||||
|
4.6
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-6 text-center">
|
||||||
|
<div class="flex items-center justify-center gap-1 text-on-surface">
|
||||||
|
<span class="material-symbols-outlined">star</span>
|
||||||
|
4.2
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-surface-container-low transition-colors">
|
||||||
|
<td class="p-6 font-title-sm text-title-sm">종합 점수</td>
|
||||||
|
<td class="p-6 text-center bg-ai-accent/10 border-2 border-ai-accent/30 rounded-xl m-2">
|
||||||
|
<div class="flex flex-col items-center gap-2">
|
||||||
|
<span class="text-display-lg text-ai-accent">92.4</span>
|
||||||
|
<span class="px-2 py-0.5 bg-ai-accent text-white rounded text-[10px] font-bold">AI 가중 스코어</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-6 text-center">
|
||||||
|
<span class="text-headline-md text-on-surface-variant">89.1</span>
|
||||||
|
</td>
|
||||||
|
<td class="p-6 text-center">
|
||||||
|
<span class="text-headline-md text-on-surface-variant">84.7</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<!-- Visualization Section -->
|
||||||
|
<div class="mt-8 bento-grid">
|
||||||
|
<div class="col-span-8 bg-surface-container-lowest border border-outline-variant rounded-xl p-6">
|
||||||
|
<h3 class="font-title-sm text-title-sm mb-4 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-ai-accent">analytics</span>
|
||||||
|
AI 시뮬레이션: 리스크 분석
|
||||||
|
</h3>
|
||||||
|
<div class="flex gap-8 items-center h-48">
|
||||||
|
<div class="flex-1 space-y-4">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between text-label-xs mb-1">
|
||||||
|
<span>시공 지연 확률</span>
|
||||||
|
<span class="text-success-accent font-bold">2.4% (낮음)</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-2 bg-surface-container rounded-full overflow-hidden">
|
||||||
|
<div class="h-full bg-success-accent w-[2.4%]"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between text-label-xs mb-1">
|
||||||
|
<span>예산 초과 위험</span>
|
||||||
|
<span class="text-on-surface-variant">12.8% (보통)</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-2 bg-surface-container rounded-full overflow-hidden">
|
||||||
|
<div class="h-full bg-ai-accent w-[12.8%]"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between text-label-xs mb-1">
|
||||||
|
<span>자재 품질 신뢰도</span>
|
||||||
|
<span class="text-success-accent font-bold">96.5% (매우 높음)</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-2 bg-surface-container rounded-full overflow-hidden">
|
||||||
|
<div class="h-full bg-success-accent w-[96.5%]"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-1/3 h-full flex flex-col justify-center items-center bg-surface-container-low rounded-xl border border-outline-variant">
|
||||||
|
<span class="text-label-xs text-on-surface-variant mb-1">AI 최종 등급</span>
|
||||||
|
<span class="text-[48px] font-bold text-ai-accent">A+</span>
|
||||||
|
<span class="text-label-xs text-success-accent">안정적인 시공 보장</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-4 bg-surface-container-lowest border border-outline-variant rounded-xl p-6 relative overflow-hidden">
|
||||||
|
<div class="absolute top-0 right-0 p-4 opacity-10">
|
||||||
|
<span class="material-symbols-outlined text-[64px]">verified</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-title-sm text-title-sm mb-4">히스토리 분석</h3>
|
||||||
|
<p class="text-body-base text-on-surface-variant mb-4 leading-relaxed">
|
||||||
|
업체 A는 지난 3년간 KINTEX 내 유사 규모(100-150sqm) 시공을 총 12회 수행하였으며, 모든 건에 대해 클레임 발생률 0%를 기록하고 있습니다.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<span class="px-2 py-1 bg-surface-container rounded text-label-xs">#최근수행_완벽</span>
|
||||||
|
<span class="px-2 py-1 bg-surface-container rounded text-label-xs">#안전_1등급</span>
|
||||||
|
<span class="px-2 py-1 bg-surface-container rounded text-label-xs">#가격_합리적</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Right Side Action Panel -->
|
||||||
|
<aside class="w-[360px] bg-surface-container-low border-l border-outline-variant p-stack-lg sticky top-16 h-[calc(100vh-64px)] overflow-y-auto">
|
||||||
|
<h2 class="font-headline-md text-headline-md text-primary mb-6">낙찰 선정</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<!-- Highlight Card -->
|
||||||
|
<div class="bg-surface-container-lowest border border-primary p-6 rounded-xl shadow-md relative">
|
||||||
|
<div class="absolute top-4 right-4 bg-success-accent/10 text-success-accent px-2 py-0.5 rounded text-[10px] font-bold">1st Choice</div>
|
||||||
|
<div class="flex items-center gap-4 mb-4">
|
||||||
|
<div class="w-12 h-12 bg-primary rounded-xl flex items-center justify-center text-white font-bold text-xl">A</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-title-sm text-title-sm">업체 A (종합 1위)</p>
|
||||||
|
<div class="flex items-center gap-1 text-ai-accent text-label-md">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">smart_toy</span>
|
||||||
|
신뢰도 98% 분석
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4 text-label-xs pt-4 border-t border-outline-variant">
|
||||||
|
<div>
|
||||||
|
<span class="block text-on-surface-variant">제안 가격</span>
|
||||||
|
<span class="font-bold text-on-surface">₩8,400,000</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="block text-on-surface-variant">예상 기한</span>
|
||||||
|
<span class="font-bold text-on-surface">12일</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Input Section -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<label class="block font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">선정 사유 입력 (필수)</label>
|
||||||
|
<textarea class="w-full h-32 bg-surface-container-lowest border border-outline-variant rounded-xl p-4 text-body-base focus:ring-primary focus:border-primary placeholder:text-outline-variant" placeholder="종합 평가 결과 및 업체의 강점을 입력해 주세요. 예: 최저가 응찰 및 과거 동일 규모 행사 수행 실적 우수..."></textarea>
|
||||||
|
</div>
|
||||||
|
<!-- Action Button -->
|
||||||
|
<div class="space-y-3 pt-4">
|
||||||
|
<button class="w-full bg-success-accent text-white h-14 rounded-xl font-bold flex items-center justify-center gap-2 hover:brightness-110 active:scale-[0.98] transition-all shadow-lg shadow-success-accent/20">
|
||||||
|
<span class="material-symbols-outlined">how_to_reg</span>
|
||||||
|
낙찰(Award) 최종 승인
|
||||||
|
</button>
|
||||||
|
<button class="w-full bg-surface-container-highest text-on-surface-variant h-12 rounded-xl font-bold hover:bg-surface-dim transition-all">
|
||||||
|
재입찰 요청
|
||||||
|
</button>
|
||||||
|
<div class="flex items-start gap-2 p-4 bg-error-container/30 rounded-lg text-error text-[11px] leading-relaxed">
|
||||||
|
<span class="material-symbols-outlined text-[16px] mt-0.5">info</span>
|
||||||
|
<p>주의: 낙찰 선정 후에는 취소가 불가하며, 해당 견적서는 즉시 계약·발주 공문서로 전환되어 법적 효력을 갖게 됩니다.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Helper Footer -->
|
||||||
|
<div class="pt-8 border-t border-outline-variant">
|
||||||
|
<p class="text-label-xs text-on-surface-variant font-bold mb-3">낙찰 이후 프로세스</p>
|
||||||
|
<ul class="space-y-3">
|
||||||
|
<li class="flex gap-3 text-label-xs text-on-surface-variant">
|
||||||
|
<span class="w-5 h-5 rounded-full bg-surface-container flex items-center justify-center text-[10px]">1</span>
|
||||||
|
전자 서명 및 계약 체결
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-3 text-label-xs text-on-surface-variant">
|
||||||
|
<span class="w-5 h-5 rounded-full bg-surface-container flex items-center justify-center text-[10px]">2</span>
|
||||||
|
시공 착수 회의 예약
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-3 text-label-xs text-on-surface-variant">
|
||||||
|
<span class="w-5 h-5 rounded-full bg-surface-container flex items-center justify-center text-[10px]">3</span>
|
||||||
|
정기 공정 보고서 발송
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
<!-- Floating AI Assistant Chat (Micro-interaction) -->
|
||||||
|
<div class="fixed bottom-8 right-8 z-[60]">
|
||||||
|
<button class="w-14 h-14 bg-ai-accent text-white rounded-full flex items-center justify-center shadow-xl hover:scale-110 active:scale-95 transition-all group overflow-hidden">
|
||||||
|
<!-- Placeholder for future expansion -->
|
||||||
|
<span class="material-symbols-outlined text-3xl transition-transform group-hover:rotate-12">psychology</span>
|
||||||
|
</button>
|
||||||
|
<div class="absolute bottom-full right-0 mb-4 w-64 glass-panel border border-outline-variant p-4 rounded-2xl shadow-2xl opacity-0 translate-y-4 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
|
||||||
|
<p class="text-label-xs text-ai-accent font-bold mb-1">AI Recommendation Insight</p>
|
||||||
|
<p class="text-body-sm leading-snug">
|
||||||
|
"업체 A는 작년 '2023 국제모터쇼'에서 동일한 재질의 부스를 제안가보다 5% 낮은 최종 정산가로 완공한 이력이 있어 가장 추천합니다."
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
// Simple micro-interaction for the recommendation highlight
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const aiButton = document.querySelector('.fixed.bottom-8.right-8');
|
||||||
|
const tooltip = aiButton.querySelector('.glass-panel');
|
||||||
|
|
||||||
|
aiButton.addEventListener('mouseenter', () => {
|
||||||
|
tooltip.style.opacity = '1';
|
||||||
|
tooltip.style.transform = 'translateY(0)';
|
||||||
|
tooltip.style.pointerEvents = 'auto';
|
||||||
|
});
|
||||||
|
|
||||||
|
aiButton.addEventListener('mouseleave', () => {
|
||||||
|
tooltip.style.opacity = '0';
|
||||||
|
tooltip.style.transform = 'translateY(1rem)';
|
||||||
|
tooltip.style.pointerEvents = 'none';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,544 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="light" 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&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"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
.glass-card {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(193, 199, 211, 0.5);
|
||||||
|
}
|
||||||
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||||
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||||
|
</style>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"primary": "#003765",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"outline": "#727781",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"on-surface-variant": "#424750"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"container-padding": "24px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"base": "4px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"body-base": ["Inter"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-surface font-body-base antialiased">
|
||||||
|
<!-- Sidebar Navigation -->
|
||||||
|
<aside class="w-[240px] h-screen fixed left-0 top-0 bg-inverse-surface flex flex-col py-stack-lg px-gutter border-r border-outline-variant z-50">
|
||||||
|
<div class="mb-stack-lg">
|
||||||
|
<img alt="KINTEX Admin Logo" class="h-10 object-contain brightness-0 invert" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD-YApYFpKErWYFPUlF6AJaJ1HO1UjoYAGxp255OT9ViuUZdP3MO_wVCjJL7vnauUVxTZxUjVtAU9lnu_gwEXzs7WTduIDg1_MrAL8R5xOY_Co7ZSWTIZa0jXsoGg2yImMaGxT6EUHJFqJMbgtykwzipJRVZKhRC0EgxIMBX3NZHTv8vgdK6npSj6FaTJ8wRt6FjF3K3w2KXT2R4C_NL8PvRpcmx2FBzJ5-2jMHT0XUuPbvsadhqSDqyG1F8iLFCbs6JhjPPRUyj5w"/>
|
||||||
|
<div class="mt-4 px-2">
|
||||||
|
<h1 class="font-display-lg text-[20px] text-on-primary-fixed tracking-tight">KINTEX Visitor Admin</h1>
|
||||||
|
<p class="font-label-md text-surface-variant text-[11px]">글로벌 마이스 플랫폼</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 space-y-1 overflow-y-auto no-scrollbar">
|
||||||
|
<div class="px-2 py-1 flex items-center gap-3 rounded-lg cursor-pointer transition-colors text-surface-variant hover:bg-surface-container-highest/10">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="font-label-md text-label-md">대시보드</span>
|
||||||
|
</div>
|
||||||
|
<!-- Active Item: 관람객 -->
|
||||||
|
<div class="px-2 py-2.5 flex items-center gap-3 rounded-lg cursor-pointer bg-secondary-container text-on-secondary-container font-bold border-l-4 border-secondary transition-all">
|
||||||
|
<span class="material-symbols-outlined">group</span>
|
||||||
|
<span class="font-label-md text-label-md">관람객</span>
|
||||||
|
</div>
|
||||||
|
<div class="px-2 py-1 flex items-center gap-3 rounded-lg cursor-pointer transition-colors text-surface-variant hover:bg-surface-container-highest/10">
|
||||||
|
<span class="material-symbols-outlined">event_available</span>
|
||||||
|
<span class="font-label-md text-label-md">전시 관리</span>
|
||||||
|
</div>
|
||||||
|
<div class="px-2 py-1 flex items-center gap-3 rounded-lg cursor-pointer transition-colors text-surface-variant hover:bg-surface-container-highest/10">
|
||||||
|
<span class="material-symbols-outlined">assignment</span>
|
||||||
|
<span class="font-label-md text-label-md">신청 폼</span>
|
||||||
|
</div>
|
||||||
|
<div class="px-2 py-1 flex items-center gap-3 rounded-lg cursor-pointer transition-colors text-surface-variant hover:bg-surface-container-highest/10">
|
||||||
|
<span class="material-symbols-outlined">analytics</span>
|
||||||
|
<span class="font-label-md text-label-md">통계 분석</span>
|
||||||
|
</div>
|
||||||
|
<div class="px-2 py-1 flex items-center gap-3 rounded-lg cursor-pointer transition-colors text-surface-variant hover:bg-surface-container-highest/10">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span class="font-label-md text-label-md">시스템 설정</span>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div class="mt-auto pt-stack-lg border-t border-outline/20 space-y-1">
|
||||||
|
<button class="w-full flex items-center gap-2 px-4 py-3 bg-primary-container text-on-primary-container rounded-full text-label-md font-bold mb-4 transition-transform active:scale-95">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">auto_awesome</span>
|
||||||
|
AI 분석 리포트
|
||||||
|
</button>
|
||||||
|
<div class="px-2 py-1 flex items-center gap-3 text-surface-variant cursor-pointer hover:text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
<span class="font-label-md text-label-md">헬프센터</span>
|
||||||
|
</div>
|
||||||
|
<div class="px-2 py-1 flex items-center gap-3 text-surface-variant cursor-pointer hover:text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined">logout</span>
|
||||||
|
<span class="font-label-md text-label-md">로그아웃</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Top Navigation Bar -->
|
||||||
|
<header class="fixed top-0 left-[240px] w-[calc(100%-240px)] h-16 bg-surface-bright flex justify-between items-center px-container-padding border-b border-outline-variant z-40">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="material-symbols-outlined text-primary cursor-pointer">menu_open</span>
|
||||||
|
<h2 class="font-headline-md text-headline-md text-primary">관람객 데이터 관리</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<div class="relative group">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">search</span>
|
||||||
|
<input class="pl-10 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-full text-body-sm w-64 focus:ring-2 focus:ring-primary outline-none transition-all" placeholder="검색어를 입력하세요..." type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined cursor-pointer hover:text-primary transition-colors">notifications</span>
|
||||||
|
<span class="material-symbols-outlined cursor-pointer hover:text-primary transition-colors">security</span>
|
||||||
|
<div class="flex items-center gap-2 cursor-pointer border-l border-outline-variant pl-4">
|
||||||
|
<span class="material-symbols-outlined text-[32px]">account_circle</span>
|
||||||
|
<div class="text-left hidden lg:block">
|
||||||
|
<p class="text-label-md font-bold leading-tight">Admin User</p>
|
||||||
|
<p class="text-[10px] text-outline">KINTEX System</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Content Canvas -->
|
||||||
|
<main class="ml-[240px] mt-16 p-container-padding space-y-6">
|
||||||
|
<!-- KPI Row -->
|
||||||
|
<section class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-gutter">
|
||||||
|
<!-- KPI 1 -->
|
||||||
|
<div class="bg-surface-container-lowest p-stack-md rounded-xl border border-outline-variant border-l-4 border-primary shadow-sm">
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<p class="text-on-surface-variant font-label-md">사전등록</p>
|
||||||
|
<span class="material-symbols-outlined text-primary text-[20px]">how_to_reg</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-baseline gap-2">
|
||||||
|
<h3 class="text-[28px] font-bold">12,480</h3>
|
||||||
|
<span class="bg-primary-fixed text-on-primary-fixed text-[10px] px-1.5 py-0.5 rounded font-bold">+12.4%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- KPI 2 -->
|
||||||
|
<div class="bg-surface-container-lowest p-stack-md rounded-xl border border-outline-variant border-l-4 border-secondary shadow-sm">
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<p class="text-on-surface-variant font-label-md">체크인</p>
|
||||||
|
<span class="material-symbols-outlined text-secondary text-[20px]">check_circle</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-[28px] font-bold">8,210</h3>
|
||||||
|
<div class="w-full bg-surface-container h-1.5 rounded-full mt-2 overflow-hidden">
|
||||||
|
<div class="bg-secondary h-full" style="width: 65%;"></div>
|
||||||
|
</div>
|
||||||
|
<p class="text-[10px] text-outline mt-1 text-right">Progress: 65.7%</p>
|
||||||
|
</div>
|
||||||
|
<!-- KPI 3 -->
|
||||||
|
<div class="bg-surface-container-lowest p-stack-md rounded-xl border border-outline-variant border-l-4 border-error shadow-sm">
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<p class="text-on-surface-variant font-label-md">노쇼율</p>
|
||||||
|
<span class="material-symbols-outlined text-error text-[20px]">event_busy</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<h3 class="text-[28px] font-bold">12%</h3>
|
||||||
|
<span class="flex items-center gap-0.5 text-error font-bold text-[11px]">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">warning</span> Alert
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- KPI 4 -->
|
||||||
|
<div class="bg-surface-container-lowest p-stack-md rounded-xl border border-outline-variant border-l-4 border-tertiary shadow-sm">
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<p class="text-on-surface-variant font-label-md">바이어 비중</p>
|
||||||
|
<span class="material-symbols-outlined text-tertiary text-[20px]">business_center</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-[28px] font-bold">34%</h3>
|
||||||
|
<p class="text-[10px] text-outline">Target: 30%</p>
|
||||||
|
</div>
|
||||||
|
<!-- KPI 5 -->
|
||||||
|
<div class="bg-surface-container-lowest p-stack-md rounded-xl border border-outline-variant border-l-4 border-secondary-container shadow-sm overflow-hidden relative">
|
||||||
|
<div class="flex justify-between items-start mb-2 relative z-10">
|
||||||
|
<p class="text-on-surface-variant font-label-md">리드 생성</p>
|
||||||
|
<span class="material-symbols-outlined text-secondary text-[20px]">auto_awesome</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-[28px] font-bold text-secondary relative z-10">2,140</h3>
|
||||||
|
<p class="text-[10px] text-outline relative z-10">AI Predicted Performance</p>
|
||||||
|
<!-- Subtle background glow -->
|
||||||
|
<div class="absolute -right-4 -bottom-4 w-16 h-16 bg-secondary/10 blur-2xl rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<section class="grid grid-cols-1 lg:grid-cols-3 gap-gutter">
|
||||||
|
<!-- Left 2/3: Trend Chart -->
|
||||||
|
<div class="lg:col-span-2 bg-surface-container-lowest rounded-xl border border-outline-variant p-stack-lg shadow-sm">
|
||||||
|
<div class="flex justify-between items-center mb-6">
|
||||||
|
<h4 class="font-title-sm text-title-sm">등록 및 체크인 추이</h4>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<span class="w-3 h-3 bg-[#0066B3] rounded-full"></span>
|
||||||
|
<span class="text-label-xs">사전등록</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<span class="w-3 h-3 bg-outline rounded-full"></span>
|
||||||
|
<span class="text-label-xs">체크인</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-64 relative">
|
||||||
|
<!-- Chart Placeholder via CSS Gradients & Lines -->
|
||||||
|
<div class="absolute inset-0 flex items-end justify-between px-2 pt-4">
|
||||||
|
<div class="absolute inset-0 grid grid-rows-4 w-full h-full">
|
||||||
|
<div class="border-b border-surface-container-high w-full h-full"></div>
|
||||||
|
<div class="border-b border-surface-container-high w-full h-full"></div>
|
||||||
|
<div class="border-b border-surface-container-high w-full h-full"></div>
|
||||||
|
<div class="border-b border-surface-container-high w-full h-full"></div>
|
||||||
|
</div>
|
||||||
|
<!-- Abstract Area Chart UI -->
|
||||||
|
<svg class="w-full h-full relative z-10" preserveaspectratio="none" viewbox="0 0 100 100">
|
||||||
|
<!-- Blue Area -->
|
||||||
|
<path d="M0,100 L0,80 C10,75 20,40 30,50 C40,60 50,20 60,35 C70,50 80,10 90,5 C100,0 100,100 L100,100 Z" fill="rgba(0,102,179,0.1)" stroke="#0066B3" stroke-width="2"></path>
|
||||||
|
<!-- Gray Area -->
|
||||||
|
<path d="M0,100 L0,90 C10,88 20,70 30,75 C40,80 50,50 60,65 C70,75 80,40 90,35 C100,30 100,100 L100,100 Z" fill="rgba(114,119,129,0.1)" stroke="#727781" stroke-width="2"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<!-- Inset Donut Chart -->
|
||||||
|
<div class="absolute bottom-4 right-4 w-32 h-32 glass-card rounded-xl p-3 flex flex-col items-center justify-center border border-outline-variant">
|
||||||
|
<p class="text-[10px] font-bold mb-2">등록 유형</p>
|
||||||
|
<div class="relative w-16 h-16">
|
||||||
|
<svg class="w-full h-full" viewbox="0 0 36 36">
|
||||||
|
<circle cx="18" cy="18" fill="transparent" r="15.9" stroke="#e1e7ff" stroke-width="4"></circle>
|
||||||
|
<circle cx="18" cy="18" fill="transparent" r="15.9" stroke="#003765" stroke-dasharray="62, 100" stroke-dashoffset="25" stroke-width="4"></circle>
|
||||||
|
<circle cx="18" cy="18" fill="transparent" r="15.9" stroke="#5427e6" stroke-dasharray="34, 100" stroke-dashoffset="-37" stroke-width="4"></circle>
|
||||||
|
</svg>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center">
|
||||||
|
<span class="text-[10px] font-bold">100%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2 mt-2">
|
||||||
|
<div class="text-[8px]"><span class="w-1 h-1 bg-primary inline-block mr-0.5"></span>62%</div>
|
||||||
|
<div class="text-[8px]"><span class="w-1 h-1 bg-secondary inline-block mr-0.5"></span>34%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between mt-4 text-[11px] text-outline px-2">
|
||||||
|
<span>D-14</span><span>D-10</span><span>D-7</span><span>D-3</span><span>Today</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Right 1/3: Forms & Badge -->
|
||||||
|
<div class="space-y-gutter">
|
||||||
|
<!-- Registration Forms Management -->
|
||||||
|
<div class="bg-surface-container-lowest rounded-xl border border-outline-variant p-stack-md shadow-sm">
|
||||||
|
<div class="flex justify-between items-center mb-4">
|
||||||
|
<h4 class="font-title-sm text-title-sm">등록 폼 관리</h4>
|
||||||
|
<span class="material-symbols-outlined text-outline cursor-pointer">more_horiz</span>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-3 mb-4">
|
||||||
|
<div class="flex items-center justify-between p-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-2 h-2 bg-primary rounded-full"></div>
|
||||||
|
<span class="text-body-sm font-medium">일반 참관객</span>
|
||||||
|
</div>
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input checked="" class="sr-only peer" type="checkbox"/>
|
||||||
|
<div class="w-9 h-5 bg-outline-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-2 h-2 bg-secondary rounded-full"></div>
|
||||||
|
<span class="text-body-sm font-medium">비즈니스 바이어</span>
|
||||||
|
</div>
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input checked="" class="sr-only peer" type="checkbox"/>
|
||||||
|
<div class="w-9 h-5 bg-outline-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-2 h-2 bg-tertiary-container rounded-full"></div>
|
||||||
|
<span class="text-body-sm font-medium">VIP 초청</span>
|
||||||
|
</div>
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input class="sr-only peer" type="checkbox"/>
|
||||||
|
<div class="w-9 h-5 bg-outline-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="w-full bg-secondary text-on-secondary py-3 rounded-xl flex items-center justify-center gap-2 font-bold transition-all hover:brightness-110 active:scale-95 shadow-md">
|
||||||
|
<span class="material-symbols-outlined">auto_awesome</span>
|
||||||
|
AI 폼빌더 시작하기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Badge Template Preview -->
|
||||||
|
<div class="bg-surface-container-lowest rounded-xl border border-outline-variant p-stack-md shadow-sm">
|
||||||
|
<h4 class="font-title-sm text-title-sm mb-4">배지 템플릿</h4>
|
||||||
|
<div class="relative bg-surface-container-high rounded-lg p-4 flex flex-col items-center">
|
||||||
|
<div class="bg-white w-32 h-44 rounded-md shadow-lg border border-outline-variant overflow-hidden flex flex-col">
|
||||||
|
<div class="h-6 bg-primary flex items-center justify-center px-1">
|
||||||
|
<span class="text-[6px] text-white font-bold tracking-widest">KINTEX VISITOR</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-2 flex-1 flex flex-col items-center">
|
||||||
|
<div class="w-12 h-12 bg-surface-container mt-2 flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-outline text-[40px]">qr_code_2</span>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 text-center">
|
||||||
|
<p class="text-[10px] font-bold text-primary">KIM **</p>
|
||||||
|
<p class="text-[6px] text-outline mt-1 uppercase">Samsung Electronics</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-auto w-full flex justify-between items-end">
|
||||||
|
<div class="h-4 w-8 bg-secondary-container rounded-sm flex items-center justify-center">
|
||||||
|
<span class="text-[4px] text-on-secondary-container font-black">BUYER</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-[5px] text-outline-variant font-mono">2024-V01</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="mt-4 w-full bg-surface-container-lowest border border-outline-variant py-2 rounded-lg text-label-md hover:bg-surface-container transition-colors">편집하기</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Bottom Section: Data Table -->
|
||||||
|
<section class="bg-surface-container-lowest rounded-xl border border-outline-variant shadow-sm overflow-hidden">
|
||||||
|
<div class="px-stack-lg py-stack-md border-b border-outline-variant flex justify-between items-center bg-surface-container-low">
|
||||||
|
<h4 class="font-title-sm text-title-sm">전체 신청자 명단</h4>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="px-3 py-1.5 bg-white border border-outline-variant rounded-md text-label-md flex items-center gap-1 hover:bg-surface-container transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">filter_list</span> 필터
|
||||||
|
</button>
|
||||||
|
<button class="px-3 py-1.5 bg-white border border-outline-variant rounded-md text-label-md flex items-center gap-1 hover:bg-surface-container transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">download</span> 엑셀 다운로드
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full text-left border-collapse">
|
||||||
|
<thead class="bg-surface-container-high border-b border-outline-variant">
|
||||||
|
<tr>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant">이름</th>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant">유형</th>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant">소속</th>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant">등록일</th>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant">체크인</th>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant">배지</th>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-outline-variant">
|
||||||
|
<!-- Row 1 -->
|
||||||
|
<tr class="hover:bg-surface-container transition-colors">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary-fixed text-on-primary-fixed flex items-center justify-center font-bold text-label-md">K</div>
|
||||||
|
<span class="font-medium text-body-base">김*희</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="px-3 py-1 bg-primary-fixed text-on-primary-fixed-variant rounded-full text-[11px] font-bold">관람객</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm text-on-surface-variant">LG 전자</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm text-outline">2024.10.12</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center gap-1.5 text-tertiary font-bold text-body-sm">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-tertiary"></span> 완료
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary">qr_code</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="material-symbols-outlined text-outline cursor-pointer">more_vert</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 2 -->
|
||||||
|
<tr class="bg-surface-container-low hover:bg-surface-container transition-colors">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-secondary-fixed text-on-secondary-fixed flex items-center justify-center font-bold text-label-md">L</div>
|
||||||
|
<span class="font-medium text-body-base">이*준</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="px-3 py-1 bg-secondary-fixed text-on-secondary-fixed-variant rounded-full text-[11px] font-bold">바이어</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm text-on-surface-variant">Samsung Electronics</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm text-outline">2024.10.14</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center gap-1.5 text-outline font-bold text-body-sm">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-outline"></span> 미입장
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary">qr_code</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="material-symbols-outlined text-outline cursor-pointer">more_vert</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 3 -->
|
||||||
|
<tr class="hover:bg-surface-container transition-colors">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-tertiary-fixed text-on-tertiary-fixed flex items-center justify-center font-bold text-label-md">P</div>
|
||||||
|
<span class="font-medium text-body-base">박*서</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="px-3 py-1 bg-tertiary-fixed text-on-tertiary-fixed-variant rounded-full text-[11px] font-bold">VIP</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm text-on-surface-variant">Hyundai Motors</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm text-outline">2024.10.15</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center gap-1.5 text-tertiary font-bold text-body-sm">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-tertiary"></span> 완료
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary">qr_code</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="material-symbols-outlined text-outline cursor-pointer">more_vert</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 4 -->
|
||||||
|
<tr class="bg-surface-container-low hover:bg-surface-container transition-colors">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-error-container text-on-error-container flex items-center justify-center font-bold text-label-md">C</div>
|
||||||
|
<span class="font-medium text-body-base">최*훈</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="px-3 py-1 bg-primary-fixed text-on-primary-fixed-variant rounded-full text-[11px] font-bold">관람객</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm text-on-surface-variant">개인 참관</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm text-outline">2024.10.15</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center gap-1.5 text-error font-bold text-body-sm">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-error"></span> 취소
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="material-symbols-outlined text-outline opacity-20">qr_code</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="material-symbols-outlined text-outline cursor-pointer">more_vert</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="px-stack-lg py-stack-md flex items-center justify-between bg-surface-container-lowest">
|
||||||
|
<p class="text-body-sm text-outline">총 12,480명 중 1-4 표시 중</p>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="p-1.5 border border-outline-variant rounded-md hover:bg-surface-container"><span class="material-symbols-outlined text-[18px]">chevron_left</span></button>
|
||||||
|
<button class="px-3 py-1.5 bg-primary text-on-primary rounded-md text-label-md">1</button>
|
||||||
|
<button class="px-3 py-1.5 border border-outline-variant rounded-md text-label-md hover:bg-surface-container">2</button>
|
||||||
|
<button class="px-3 py-1.5 border border-outline-variant rounded-md text-label-md hover:bg-surface-container">3</button>
|
||||||
|
<button class="p-1.5 border border-outline-variant rounded-md hover:bg-surface-container"><span class="material-symbols-outlined text-[18px]">chevron_right</span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
// Micro-interactions and effects
|
||||||
|
document.querySelectorAll('.hover\\:scale-95').forEach(button => {
|
||||||
|
button.addEventListener('mousedown', () => button.classList.add('scale-95'));
|
||||||
|
button.addEventListener('mouseup', () => button.classList.remove('scale-95'));
|
||||||
|
button.addEventListener('mouseleave', () => button.classList.remove('scale-95'));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Simple tab/active logic for demonstration
|
||||||
|
const navItems = document.querySelectorAll('nav > div');
|
||||||
|
navItems.forEach(item => {
|
||||||
|
item.addEventListener('click', () => {
|
||||||
|
navItems.forEach(i => {
|
||||||
|
i.classList.remove('bg-secondary-container', 'text-on-secondary-container', 'font-bold', 'border-l-4', 'border-secondary');
|
||||||
|
i.classList.add('text-surface-variant', 'hover:bg-surface-container-highest/10');
|
||||||
|
});
|
||||||
|
item.classList.add('bg-secondary-container', 'text-on-secondary-container', 'font-bold', 'border-l-4', 'border-secondary');
|
||||||
|
item.classList.remove('text-surface-variant', 'hover:bg-surface-container-highest/10');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
504
stitch_kintex_ai_system_architect/scr_32_lead_scoring/code.html
Normal file
504
stitch_kintex_ai_system_architect/scr_32_lead_scoring/code.html
Normal file
@ -0,0 +1,504 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>KINTEX AI - 리드 관리 시스템 (SCR-32)</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@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"/>
|
||||||
|
<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-container-highest": "#dbe2fa",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"primary": "#003765",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"outline": "#727781",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"on-tertiary-container": "#68d1a0"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-sm": "8px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"body-sm": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.active-nav-border {
|
||||||
|
border-left: 4px solid #5427e6;
|
||||||
|
}
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface font-body-base text-on-surface">
|
||||||
|
<!-- Sidebar Navigation -->
|
||||||
|
<aside class="h-screen w-64 fixed left-0 top-0 bg-surface-container-low border-r border-outline-variant flex flex-col py-6 z-50">
|
||||||
|
<div class="px-6 mb-10">
|
||||||
|
<h1 class="font-display-lg text-display-lg font-bold text-primary">KINTEX AI</h1>
|
||||||
|
<p class="font-label-md text-label-md text-on-surface-variant opacity-70">전시관리 시스템</p>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-grow space-y-1">
|
||||||
|
<a class="flex items-center px-6 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">dashboard</span> 대시보드
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-6 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">event</span> 전시 관리
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-6 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">group</span> 사용자 관리
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-6 py-3 bg-secondary-container text-on-secondary-container font-bold active-nav-border font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">person_search</span> 리드 관리
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-6 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">sensors</span> 기기 모니터링
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-6 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">leaderboard</span> 통계 분석
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-6 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">history</span> 감사 로그
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="px-6 mt-auto pt-6 border-t border-outline-variant">
|
||||||
|
<a class="flex items-center py-2 text-on-surface-variant hover:underline font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">help</span> 도움말
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center py-2 text-on-surface-variant hover:underline font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">logout</span> 로그아웃
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<main class="ml-64 min-h-screen flex flex-col">
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="sticky top-0 z-40 bg-surface h-16 border-b border-outline-variant flex items-center justify-between px-container-padding">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<h2 class="font-headline-md text-headline-md font-bold text-on-surface">리드 관리 (SCR-32)</h2>
|
||||||
|
<div class="relative w-80">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span>
|
||||||
|
<input class="w-full pl-10 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-full text-body-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none" placeholder="리드 이름 또는 회사명 검색..." type="text"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg font-label-md text-label-md hover:bg-primary-container transition-colors">
|
||||||
|
CSV 내보내기
|
||||||
|
</button>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high rounded-full transition-colors relative">
|
||||||
|
<span class="material-symbols-outlined">notifications</span>
|
||||||
|
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high rounded-full transition-colors">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
</button>
|
||||||
|
<div class="w-8 h-8 rounded-full overflow-hidden border border-outline-variant">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A professional headshot of an Asian male executive in a well-tailored charcoal grey suit and blue silk tie. He is smiling warmly and confidently against a neutral studio background. The lighting is soft and professional, emphasizing his clear skin and neat hairstyle, perfectly matching a high-end corporate AI dashboard aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDXZ_Ne7Cy5TEBHWgOVg7xzVY9c_JZuql6sEpRDUNhm4SCxvRm88AvP8ttFDxTt8muPvPXfPxyUDa4dJs0sURlvjofOegNJNnCiB3cdQYLS4C028Ord3axlxg9aqYbsbyUgOS_JjZi0Qpz5qASJYVL_p8RUgBDxcZcHyd3OPnnOYLN_dEWmh8IE2WPFCTKPyo6beaVYLgNbVsDwmY1YHHTi32LuITcmFb3Ph2ArxNQr2Tej78s-AA681FK0A-G-bWC9M7xmgseOX5Q"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="p-container-padding space-y-stack-lg">
|
||||||
|
<!-- KPI Section -->
|
||||||
|
<section class="grid grid-cols-1 md:grid-cols-4 gap-gutter">
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant p-stack-md rounded-xl">
|
||||||
|
<p class="font-label-md text-label-md text-on-surface-variant mb-1">총 리드</p>
|
||||||
|
<div class="flex items-end justify-between">
|
||||||
|
<h3 class="font-headline-md text-headline-md font-bold text-on-surface">342</h3>
|
||||||
|
<span class="text-secondary text-[24px] material-symbols-outlined">groups</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border-l-4 border-secondary border-outline-variant p-stack-md rounded-xl shadow-md">
|
||||||
|
<p class="font-label-md text-label-md text-secondary font-bold mb-1">핫리드</p>
|
||||||
|
<div class="flex items-end justify-between">
|
||||||
|
<h3 class="font-headline-md text-headline-md font-bold text-secondary">68</h3>
|
||||||
|
<span class="text-secondary text-[24px] material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">local_fire_department</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant p-stack-md rounded-xl">
|
||||||
|
<p class="font-label-md text-label-md text-on-surface-variant mb-1">팔로업 대기</p>
|
||||||
|
<div class="flex items-end justify-between">
|
||||||
|
<h3 class="font-headline-md text-headline-md font-bold text-on-surface">120</h3>
|
||||||
|
<span class="text-on-surface-variant text-[24px] material-symbols-outlined">pending_actions</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant p-stack-md rounded-xl flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-label-md text-on-surface-variant mb-1">전환 추정</p>
|
||||||
|
<h3 class="font-headline-md text-headline-md font-bold text-on-surface">24</h3>
|
||||||
|
</div>
|
||||||
|
<img alt="AI Sparkle" class="w-12 h-12" src="https://lh3.googleusercontent.com/aida/AP1WRLu1SFz3uW8s6iC8BUAS9XvAFoM_7LQZUzR-UgorcHCSIZ_uRCF-ZTLQnQbNUG13WdRaQDX_3m0ewu6jxJ2Ie-gQvwFXyYdy3ZIxhkl0hJ2VGRZF6Iul1GgmSKzO5x92HASTCa0m0XzXjctyxy5aRgxOTOxhzl-Qz9P5jTlRzXngIWh6bCNZdaVEIxd9H6a2fDdToHYg0gowaU93SV2P5YbT0-8ShD0eeNiQEFHXn4HcsQUCrsiacEeGDZY"/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Main Layout Grid -->
|
||||||
|
<div class="grid grid-cols-3 gap-gutter">
|
||||||
|
<!-- Left: Leads Table -->
|
||||||
|
<section class="col-span-2 space-y-stack-md">
|
||||||
|
<div class="flex items-center gap-2 overflow-x-auto pb-2">
|
||||||
|
<span class="font-label-md text-label-md text-on-surface-variant mr-2">필터:</span>
|
||||||
|
<div class="bg-primary-fixed text-on-primary-fixed-variant px-3 py-1 rounded-full font-label-md text-label-md flex items-center gap-1 cursor-pointer">
|
||||||
|
스코어 80+ <span class="material-symbols-outlined text-[14px]">close</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-high text-on-surface-variant px-3 py-1 rounded-full font-label-md text-label-md flex items-center gap-1 cursor-pointer hover:bg-surface-container-highest">
|
||||||
|
로봇 <span class="material-symbols-outlined text-[14px]">close</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-high text-on-surface-variant px-3 py-1 rounded-full font-label-md text-label-md flex items-center gap-1 cursor-pointer hover:bg-surface-container-highest">
|
||||||
|
솔루션 <span class="material-symbols-outlined text-[14px]">close</span>
|
||||||
|
</div>
|
||||||
|
<button class="text-primary font-label-md text-label-md flex items-center hover:underline ml-auto">
|
||||||
|
<span class="material-symbols-outlined text-[18px] mr-1">tune</span> 상세 필터
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden">
|
||||||
|
<table class="w-full text-left border-collapse">
|
||||||
|
<thead class="bg-surface-container-low border-b border-outline-variant">
|
||||||
|
<tr>
|
||||||
|
<th class="px-4 py-3 font-label-md text-label-md text-on-surface-variant">이름</th>
|
||||||
|
<th class="px-4 py-3 font-label-md text-label-md text-on-surface-variant">소속</th>
|
||||||
|
<th class="px-4 py-3 font-label-md text-label-md text-on-surface-variant">관심 제품</th>
|
||||||
|
<th class="px-4 py-3 font-label-md text-label-md text-on-surface-variant text-center">관심도</th>
|
||||||
|
<th class="px-4 py-3 font-label-md text-label-md text-on-surface-variant">AI 스코어</th>
|
||||||
|
<th class="px-4 py-3 font-label-md text-label-md text-on-surface-variant">수집시각</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-outline-variant">
|
||||||
|
<!-- Selected Row -->
|
||||||
|
<tr class="bg-secondary-container/10 border-l-4 border-secondary cursor-pointer">
|
||||||
|
<td class="px-4 py-4 font-body-base text-body-base font-bold text-on-surface">김**</td>
|
||||||
|
<td class="px-4 py-4 font-body-base text-body-base text-on-surface-variant">(주)테크솔루션</td>
|
||||||
|
<td class="px-4 py-4 font-body-base text-body-base text-on-surface-variant">협동로봇 HR-A1</td>
|
||||||
|
<td class="px-4 py-4 text-center">
|
||||||
|
<div class="flex justify-center text-secondary">
|
||||||
|
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-grow bg-surface-container-high h-2 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-secondary h-full rounded-full" style="width: 87%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="bg-secondary text-on-secondary px-2 py-0.5 rounded-full font-label-xs text-label-xs">87</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4 font-body-sm text-body-sm text-on-surface-variant">14:22:05</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Other Rows -->
|
||||||
|
<tr class="hover:bg-surface-container-low transition-colors cursor-pointer">
|
||||||
|
<td class="px-4 py-4 font-body-base text-body-base text-on-surface">이**</td>
|
||||||
|
<td class="px-4 py-4 font-body-base text-body-base text-on-surface-variant">넥스트 이노베이션</td>
|
||||||
|
<td class="px-4 py-4 font-body-base text-body-base text-on-surface-variant">스마트 물류 시스템</td>
|
||||||
|
<td class="px-4 py-4 text-center">
|
||||||
|
<div class="flex justify-center text-outline">
|
||||||
|
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]">star</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-grow bg-surface-container-high h-2 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-primary h-full rounded-full" style="width: 65%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="bg-primary text-on-primary px-2 py-0.5 rounded-full font-label-xs text-label-xs">65</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4 font-body-sm text-body-sm text-on-surface-variant">14:15:30</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-surface-container-low transition-colors cursor-pointer">
|
||||||
|
<td class="px-4 py-4 font-body-base text-body-base text-on-surface">박**</td>
|
||||||
|
<td class="px-4 py-4 font-body-base text-body-base text-on-surface-variant">미래 제조 연구소</td>
|
||||||
|
<td class="px-4 py-4 font-body-base text-body-base text-on-surface-variant">AI 비전 검사 모듈</td>
|
||||||
|
<td class="px-4 py-4 text-center">
|
||||||
|
<div class="flex justify-center text-outline">
|
||||||
|
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]">star</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-grow bg-surface-container-high h-2 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-secondary h-full rounded-full" style="width: 82%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="bg-secondary text-on-secondary px-2 py-0.5 rounded-full font-label-xs text-label-xs">82</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4 font-body-sm text-body-sm text-on-surface-variant">14:02:11</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-surface-container-low transition-colors cursor-pointer">
|
||||||
|
<td class="px-4 py-4 font-body-base text-body-base text-on-surface">정**</td>
|
||||||
|
<td class="px-4 py-4 font-body-base text-body-base text-on-surface-variant">글로벌 테크</td>
|
||||||
|
<td class="px-4 py-4 font-body-base text-body-base text-on-surface-variant">자율주행 AMR</td>
|
||||||
|
<td class="px-4 py-4 text-center">
|
||||||
|
<div class="flex justify-center text-outline">
|
||||||
|
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]">star</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-grow bg-surface-container-high h-2 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-primary h-full rounded-full" style="width: 44%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="bg-primary text-on-primary px-2 py-0.5 rounded-full font-label-xs text-label-xs">44</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4 font-body-sm text-body-sm text-on-surface-variant">13:55:42</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-surface-container-low transition-colors cursor-pointer">
|
||||||
|
<td class="px-4 py-4 font-body-base text-body-base text-on-surface">강**</td>
|
||||||
|
<td class="px-4 py-4 font-body-base text-body-base text-on-surface-variant">SCT 시스템</td>
|
||||||
|
<td class="px-4 py-4 font-body-base text-body-base text-on-surface-variant">클라우드 모니터링</td>
|
||||||
|
<td class="px-4 py-4 text-center">
|
||||||
|
<div class="flex justify-center text-outline">
|
||||||
|
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]">star</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]">star</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-grow bg-surface-container-high h-2 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-primary h-full rounded-full" style="width: 28%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="bg-primary text-on-primary px-2 py-0.5 rounded-full font-label-xs text-label-xs">28</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4 font-body-sm text-body-sm text-on-surface-variant">13:48:19</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div class="p-4 bg-surface-container-low flex items-center justify-between">
|
||||||
|
<span class="font-label-md text-label-md text-on-surface-variant">총 342건 중 1-5건 표시</span>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="p-1 rounded-lg border border-outline-variant hover:bg-surface-container-high disabled:opacity-50" disabled="">
|
||||||
|
<span class="material-symbols-outlined">chevron_left</span>
|
||||||
|
</button>
|
||||||
|
<button class="w-8 h-8 rounded-lg bg-primary text-on-primary font-label-md text-label-md">1</button>
|
||||||
|
<button class="w-8 h-8 rounded-lg hover:bg-surface-container-high font-label-md text-label-md">2</button>
|
||||||
|
<button class="w-8 h-8 rounded-lg hover:bg-surface-container-high font-label-md text-label-md">3</button>
|
||||||
|
<button class="p-1 rounded-lg border border-outline-variant hover:bg-surface-container-high">
|
||||||
|
<span class="material-symbols-outlined">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Right: Lead Detail Panel -->
|
||||||
|
<aside class="space-y-stack-md">
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-lg shadow-sm glass-panel">
|
||||||
|
<!-- Top Profile -->
|
||||||
|
<div class="flex items-center gap-4 mb-6">
|
||||||
|
<div class="w-16 h-16 rounded-full overflow-hidden border-2 border-secondary p-0.5">
|
||||||
|
<img class="w-full h-full object-cover rounded-full" data-alt="A professional close-up photo of a middle-aged Asian man in a business suit, representing a purchasing manager. He looks friendly and professional with a gentle smile. The background is a blurred office environment with soft, natural light coming from a window, emphasizing a high-end corporate B2B feel." src="https://lh3.googleusercontent.com/aida-public/AB6AXuADcrOSaD2ZKnncz3sAJ_w6eX2njSIckDTojxtGsknJV2cj5TXyZz4DCSQNfg1O20MDIEpOwZ4ErBYZAqdUtIKT_HX_rMukezwsajrc_p4i4P3s4R0Q8gTJuxTznPB2MsqU0Atn_HTWAIwX547X9wJm5yn9fteF4bWDooroO2vFkccZ41lE0ljMhPcvW4JbjYX7RJc3j4JbYIHPPBlQzHba_Yd5Qka1Nx4WoL_MNkzlJVKyMAYOF3lUgCRknLGwHYaeP0FTbwEJMsM"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<h3 class="font-headline-md text-headline-md font-bold text-on-surface">김**</h3>
|
||||||
|
<span class="bg-secondary-fixed text-on-secondary-fixed font-label-xs text-label-xs px-2 py-0.5 rounded">HOT</span>
|
||||||
|
</div>
|
||||||
|
<p class="font-body-base text-body-base text-on-surface-variant">구매 담당자 | (주)테크솔루션</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- AI Score Card -->
|
||||||
|
<div class="bg-secondary-container/5 border border-secondary rounded-xl p-stack-md mb-6 relative overflow-hidden">
|
||||||
|
<div class="absolute top-0 right-0 p-2 opacity-10">
|
||||||
|
<span class="material-symbols-outlined text-[64px]">psychology</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h4 class="font-title-sm text-title-sm font-bold text-secondary">AI 스코어 분석</h4>
|
||||||
|
<span class="text-secondary font-display-lg text-display-lg font-bold">87</span>
|
||||||
|
</div>
|
||||||
|
<ul class="space-y-2 font-body-sm text-body-sm text-on-surface">
|
||||||
|
<li class="flex items-start gap-2">
|
||||||
|
<span class="material-symbols-outlined text-secondary text-[18px]">check_circle</span>
|
||||||
|
<span>과거 유사 전시회 로봇 구매 이력 있음</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-2">
|
||||||
|
<span class="material-symbols-outlined text-secondary text-[18px]">check_circle</span>
|
||||||
|
<span>당사 부스 체류 시간 평균 대비 240% 높음</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-2">
|
||||||
|
<span class="material-symbols-outlined text-secondary text-[18px]">check_circle</span>
|
||||||
|
<span>기술 사양서(PDF) 다운로드 2회 기록</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- Follow-up Section -->
|
||||||
|
<div class="space-y-stack-sm mb-8">
|
||||||
|
<h4 class="font-label-md text-label-md font-bold text-on-surface flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-secondary text-[18px]">auto_awesome</span>
|
||||||
|
AI 추천 팔로업 메시지
|
||||||
|
</h4>
|
||||||
|
<div class="relative">
|
||||||
|
<textarea class="w-full bg-surface-container-low border border-outline-variant rounded-lg p-3 text-body-sm min-h-[120px] focus:ring-primary focus:border-primary outline-none">안녕하세요, (주)테크솔루션 김** 팀장님.
|
||||||
|
|
||||||
|
KINTEX AI 2045 부스에 방문해주셔서 대단히 감사합니다. 관심을 보이셨던 '협동로봇 HR-A1'의 상세 기술 사양과 귀사의 공정 최적화를 위한 커스텀 제안서를 준비했습니다.
|
||||||
|
|
||||||
|
다음 주 중 편하신 시간에 짧은 미팅이 가능하실까요?</textarea>
|
||||||
|
<button class="absolute bottom-2 right-2 p-1.5 bg-surface-container-highest text-secondary rounded-md hover:bg-secondary-fixed transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">refresh</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Actions -->
|
||||||
|
<div class="space-y-3">
|
||||||
|
<button class="w-full bg-primary text-on-primary py-3 rounded-xl font-title-sm text-title-sm font-bold hover:bg-primary-container transition-all flex items-center justify-center gap-2 shadow-md">
|
||||||
|
<span class="material-symbols-outlined">send</span>
|
||||||
|
EDM 발송하기
|
||||||
|
</button>
|
||||||
|
<div class="grid grid-cols-2 gap-3">
|
||||||
|
<button class="py-2.5 rounded-lg border border-outline-variant font-label-md text-label-md text-on-surface-variant hover:bg-surface-container-high transition-colors flex items-center justify-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">download</span>
|
||||||
|
CSV 내보내기
|
||||||
|
</button>
|
||||||
|
<button class="py-2.5 rounded-lg border border-outline-variant font-label-md text-label-md text-on-surface-variant hover:bg-surface-container-high transition-colors flex items-center justify-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">edit_note</span>
|
||||||
|
노트 기록
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Additional Context (Optional Activity Feed) -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-md">
|
||||||
|
<h4 class="font-label-md text-label-md font-bold text-on-surface mb-3">최근 활동 로그</h4>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="flex gap-3 items-start">
|
||||||
|
<div class="w-1 h-1 rounded-full bg-secondary mt-2"></div>
|
||||||
|
<div>
|
||||||
|
<p class="text-body-sm text-on-surface">제품 카탈로그 QR 스캔</p>
|
||||||
|
<span class="text-label-xs text-on-surface-variant">오늘 14:22</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-3 items-start">
|
||||||
|
<div class="w-1 h-1 rounded-full bg-secondary mt-2"></div>
|
||||||
|
<div>
|
||||||
|
<p class="text-body-sm text-on-surface">부스 내 HR-A1 구동 시연 참관</p>
|
||||||
|
<span class="text-label-xs text-on-surface-variant">오늘 14:15</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="mt-auto bg-surface-container-lowest border-t border-outline-variant py-4 px-container-padding flex justify-between items-center">
|
||||||
|
<span class="font-label-xs text-label-xs text-on-surface-variant">© 2024 KINTEX AI 전시관리. All rights reserved.</span>
|
||||||
|
<div class="flex gap-6">
|
||||||
|
<a class="font-label-xs text-label-xs text-on-surface-variant hover:underline" href="#">Privacy Policy</a>
|
||||||
|
<a class="font-label-xs text-label-xs text-on-surface-variant hover:underline" href="#">Terms of Service</a>
|
||||||
|
<a class="font-label-xs text-label-xs text-on-surface-variant hover:underline" href="#">Contact Support</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
// Simple micro-interaction for rows
|
||||||
|
document.querySelectorAll('tbody tr').forEach(row => {
|
||||||
|
row.addEventListener('click', () => {
|
||||||
|
document.querySelectorAll('tbody tr').forEach(r => {
|
||||||
|
r.classList.remove('bg-secondary-container/10', 'border-l-4', 'border-secondary');
|
||||||
|
r.classList.add('hover:bg-surface-container-low');
|
||||||
|
});
|
||||||
|
row.classList.add('bg-secondary-container/10', 'border-l-4', 'border-secondary');
|
||||||
|
row.classList.remove('hover:bg-surface-container-low');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
497
stitch_kintex_ai_system_architect/scr_33_edm_campaign/code.html
Normal file
497
stitch_kintex_ai_system_architect/scr_33_edm_campaign/code.html
Normal file
@ -0,0 +1,497 @@
|
|||||||
|
<!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 AI System - EDM 캠페인 관리</title>
|
||||||
|
<!-- Tailwind CSS -->
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<!-- Google Fonts -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Geist:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||||
|
<!-- Material Symbols -->
|
||||||
|
<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"/>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: #f9f9ff;
|
||||||
|
color: #141b2c;
|
||||||
|
}
|
||||||
|
/* Custom Scrollbar */
|
||||||
|
::-webkit-scrollbar { width: 6px; }
|
||||||
|
::-webkit-scrollbar-track { background: transparent; }
|
||||||
|
::-webkit-scrollbar-thumb { background: #c2c7d1; border-radius: 10px; }
|
||||||
|
::-webkit-scrollbar-thumb:hover { background: #727781; }
|
||||||
|
</style>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"outline": "#727781",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"outline-variant": "#c2c7d1",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"primary": "#003765",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"surface-variant": "#dbe2fa"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"base": "4px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"section-padding": "96px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"display-lg-mobile": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"headline-md": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="font-body-base overflow-x-hidden">
|
||||||
|
<!-- SideNavBar Shell -->
|
||||||
|
<aside class="w-[240px] h-screen fixed left-0 top-0 bg-inverse-surface dark:bg-on-surface flex flex-col py-stack-lg px-gutter border-r border-outline-variant z-50">
|
||||||
|
<div class="mb-10">
|
||||||
|
<h1 class="font-display-lg text-display-lg font-black text-on-primary-fixed tracking-tight">KINTEX</h1>
|
||||||
|
<p class="font-label-md text-label-md text-surface-variant opacity-70">글로벌 마이스 플랫폼</p>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 space-y-2">
|
||||||
|
<!-- Active Tab: Using '마케팅' equivalent context (Applying logic: '대시보드' is default, but prompt asks for marketing active) -->
|
||||||
|
<!-- Note: Mapping labels from JSON: ["대시보드", "관람객", "전시 관리", "신청 폼", "통계 분석", "시스템 설정"] -->
|
||||||
|
<a class="flex items-center gap-3 py-3 px-4 rounded-lg bg-secondary-container text-on-secondary-container font-bold border-l-4 border-secondary transition-colors duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">campaign</span>
|
||||||
|
<span class="font-label-md text-label-md">마케팅 관리</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 py-3 px-4 rounded-lg text-surface-variant hover:text-on-surface-variant hover:bg-surface-container-highest transition-colors duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="font-label-md text-label-md">대시보드</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 py-3 px-4 rounded-lg text-surface-variant hover:text-on-surface-variant hover:bg-surface-container-highest transition-colors duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined">group</span>
|
||||||
|
<span class="font-label-md text-label-md">관람객</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 py-3 px-4 rounded-lg text-surface-variant hover:text-on-surface-variant hover:bg-surface-container-highest transition-colors duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined">event_available</span>
|
||||||
|
<span class="font-label-md text-label-md">전시 관리</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 py-3 px-4 rounded-lg text-surface-variant hover:text-on-surface-variant hover:bg-surface-container-highest transition-colors duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined">analytics</span>
|
||||||
|
<span class="font-label-md text-label-md">통계 분석</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="mt-auto space-y-2">
|
||||||
|
<button class="w-full mb-4 bg-primary text-on-primary py-2 rounded-lg font-label-md text-label-md hover:opacity-90 transition-all">
|
||||||
|
AI 분석 리포트
|
||||||
|
</button>
|
||||||
|
<a class="flex items-center gap-3 py-2 px-4 text-surface-variant hover:text-on-surface-variant transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
<span class="font-label-md text-label-md">헬프센터</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 py-2 px-4 text-surface-variant hover:text-on-surface-variant transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">logout</span>
|
||||||
|
<span class="font-label-md text-label-md">로그아웃</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- TopAppBar Shell -->
|
||||||
|
<header class="fixed top-0 left-[240px] w-[calc(100%-240px)] h-16 flex justify-between items-center px-container-padding bg-surface-bright border-b border-outline-variant z-40">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="material-symbols-outlined text-primary cursor-pointer">menu_open</span>
|
||||||
|
<h2 class="font-headline-md text-headline-md text-primary">EDM 캠페인 관리</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<div class="relative w-64">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline-variant">search</span>
|
||||||
|
<input class="w-full pl-10 pr-4 py-1.5 rounded-full border border-outline-variant bg-surface-container-low focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all font-body-sm text-body-sm" placeholder="캠페인 검색..." type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined cursor-pointer hover:text-primary">notifications</span>
|
||||||
|
<span class="material-symbols-outlined cursor-pointer hover:text-primary">security</span>
|
||||||
|
<div class="flex items-center gap-2 border-l border-outline-variant pl-4 cursor-pointer">
|
||||||
|
<span class="material-symbols-outlined">account_circle</span>
|
||||||
|
<span class="font-label-md text-label-md text-on-surface">KINTEX Admin</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Canvas -->
|
||||||
|
<main class="ml-[240px] pt-24 px-container-padding pb-stack-lg min-h-screen">
|
||||||
|
<!-- KPI Section -->
|
||||||
|
<section class="grid grid-cols-1 md:grid-cols-4 gap-gutter mb-stack-lg">
|
||||||
|
<div class="bg-surface-container-lowest p-stack-md rounded-xl border border-outline-variant border-l-4 border-primary shadow-sm">
|
||||||
|
<p class="font-label-md text-label-md text-outline mb-1">전체 발송</p>
|
||||||
|
<h3 class="font-display-lg text-display-lg text-primary tracking-tight">24,000<span class="text-title-sm ml-1">건</span></h3>
|
||||||
|
<div class="mt-2 text-label-xs text-secondary flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">trending_up</span>
|
||||||
|
<span>지난달 대비 12% 증가</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest p-stack-md rounded-xl border border-outline-variant border-l-4 border-secondary shadow-sm">
|
||||||
|
<p class="font-label-md text-label-md text-outline mb-1">오픈율</p>
|
||||||
|
<h3 class="font-display-lg text-display-lg text-secondary tracking-tight">38<span class="text-title-sm ml-1">%</span></h3>
|
||||||
|
<div class="mt-2 text-label-xs text-on-tertiary-fixed-variant flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">check_circle</span>
|
||||||
|
<span>산업군 평균 대비 우수</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest p-stack-md rounded-xl border border-outline-variant border-l-4 border-tertiary shadow-sm">
|
||||||
|
<p class="font-label-md text-label-md text-outline mb-1">클릭율</p>
|
||||||
|
<h3 class="font-display-lg text-display-lg text-tertiary-container tracking-tight">9<span class="text-title-sm ml-1">%</span></h3>
|
||||||
|
<div class="mt-2 text-label-xs text-outline flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">history</span>
|
||||||
|
<span>유지 중</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest p-stack-md rounded-xl border border-outline-variant border-l-4 border-error shadow-sm">
|
||||||
|
<p class="font-label-md text-label-md text-outline mb-1">등록전환</p>
|
||||||
|
<h3 class="font-display-lg text-display-lg text-error tracking-tight">1,240<span class="text-title-sm ml-1">명</span></h3>
|
||||||
|
<div class="mt-2 text-label-xs text-error flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">bolt</span>
|
||||||
|
<span>실시간 목표 달성 82%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Main Action Row -->
|
||||||
|
<div class="flex justify-between items-center mb-stack-md">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<h4 class="font-title-sm text-title-sm">캠페인 목록</h4>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="px-3 py-1 rounded-full bg-surface-container-high text-on-surface-variant font-label-md text-[11px] cursor-pointer">전체</span>
|
||||||
|
<span class="px-3 py-1 rounded-full bg-primary-fixed text-on-primary-fixed-variant font-label-md text-[11px] cursor-pointer">진행중</span>
|
||||||
|
<span class="px-3 py-1 rounded-full bg-surface-container-high text-on-surface-variant font-label-md text-[11px] cursor-pointer">완료</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="bg-primary text-on-primary flex items-center gap-2 px-6 py-2 rounded-lg font-label-md text-label-md hover:bg-primary-container transition-all active:scale-95 shadow-md">
|
||||||
|
<span class="material-symbols-outlined">add</span>
|
||||||
|
새 캠페인
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Content Grid (2:1 Layout) -->
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-gutter">
|
||||||
|
<!-- Left Column: Campaign List -->
|
||||||
|
<div class="lg:col-span-2 space-y-4">
|
||||||
|
<!-- List Row 1 -->
|
||||||
|
<div class="bg-surface-container-lowest p-5 rounded-xl border border-outline-variant flex items-center justify-between hover:shadow-md transition-all group">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="w-12 h-12 rounded-lg bg-primary-fixed flex items-center justify-center text-primary">
|
||||||
|
<span class="material-symbols-outlined">mail</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="bg-surface-container-highest text-outline text-[11px] px-2 py-0.5 rounded font-bold">초안</span>
|
||||||
|
<h5 class="font-title-sm text-body-base font-bold group-hover:text-primary transition-colors">2026 스마트팩토리 사전등록 안내</h5>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-on-surface-variant text-label-xs">
|
||||||
|
<span>대상: 5,200명</span>
|
||||||
|
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
||||||
|
<span>최종 수정: 2시간 전</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-8">
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="text-label-xs text-outline mb-1">오픈율</p>
|
||||||
|
<p class="font-bold">-</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="text-label-xs text-outline mb-1">클릭율</p>
|
||||||
|
<p class="font-bold">-</p>
|
||||||
|
</div>
|
||||||
|
<span class="material-symbols-outlined text-outline-variant group-hover:text-primary transition-colors cursor-pointer">chevron_right</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- List Row 2 -->
|
||||||
|
<div class="bg-surface-container-lowest p-5 rounded-xl border border-outline-variant flex items-center justify-between hover:shadow-md transition-all group">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="w-12 h-12 rounded-lg bg-tertiary-fixed flex items-center justify-center text-tertiary">
|
||||||
|
<span class="material-symbols-outlined">schedule</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="bg-primary-fixed text-on-primary-fixed-variant text-[11px] px-2 py-0.5 rounded font-bold">예약</span>
|
||||||
|
<h5 class="font-title-sm text-body-base font-bold group-hover:text-primary transition-colors">VIP 바이어 네트워킹 데이 초대권</h5>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-on-surface-variant text-label-xs">
|
||||||
|
<span>대상: 850명</span>
|
||||||
|
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
||||||
|
<span>발송예정: 2024.11.20 10:00</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-8">
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="text-label-xs text-outline mb-1">오픈율</p>
|
||||||
|
<p class="font-bold">24% <span class="text-[9px] font-normal text-outline">(예상)</span></p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="text-label-xs text-outline mb-1">클릭율</p>
|
||||||
|
<p class="font-bold">5% <span class="text-[9px] font-normal text-outline">(예상)</span></p>
|
||||||
|
</div>
|
||||||
|
<span class="material-symbols-outlined text-outline-variant group-hover:text-primary transition-colors cursor-pointer">chevron_right</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- List Row 3 -->
|
||||||
|
<div class="bg-surface-container-lowest p-5 rounded-xl border border-outline-variant flex items-center justify-between hover:shadow-md transition-all group">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="w-12 h-12 rounded-lg bg-secondary-fixed flex items-center justify-center text-secondary">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">send</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="bg-error-container text-on-error-container text-[11px] px-2 py-0.5 rounded font-bold">발송중</span>
|
||||||
|
<h5 class="font-title-sm text-body-base font-bold group-hover:text-primary transition-colors">글로벌 테크 트렌드 리포트 (Vol. 12)</h5>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-on-surface-variant text-label-xs">
|
||||||
|
<span>대상: 12,000명</span>
|
||||||
|
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
||||||
|
<span>진행률: 68% (8,160건 완료)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-8">
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="text-label-xs text-outline mb-1">오픈율</p>
|
||||||
|
<p class="font-bold text-secondary">42.5%</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="text-label-xs text-outline mb-1">클릭율</p>
|
||||||
|
<p class="font-bold text-secondary">11.2%</p>
|
||||||
|
</div>
|
||||||
|
<span class="material-symbols-outlined text-outline-variant group-hover:text-primary transition-colors cursor-pointer">chevron_right</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- List Row 4 -->
|
||||||
|
<div class="bg-surface-container-lowest p-5 rounded-xl border border-outline-variant flex items-center justify-between hover:shadow-md transition-all group opacity-80">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="w-12 h-12 rounded-lg bg-surface-container-high flex items-center justify-center text-outline">
|
||||||
|
<span class="material-symbols-outlined">done_all</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="bg-on-tertiary-fixed-variant text-white text-[11px] px-2 py-0.5 rounded font-bold">완료</span>
|
||||||
|
<h5 class="font-title-sm text-body-base font-bold group-hover:text-primary transition-colors">KINTEX 추석 연휴 휴관 및 일정 안내</h5>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-on-surface-variant text-label-xs">
|
||||||
|
<span>대상: 45,000명</span>
|
||||||
|
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
||||||
|
<span>완료일: 2024.09.12</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-8">
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="text-label-xs text-outline mb-1">오픈율</p>
|
||||||
|
<p class="font-bold">31.8%</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="text-label-xs text-outline mb-1">클릭율</p>
|
||||||
|
<p class="font-bold">2.4%</p>
|
||||||
|
</div>
|
||||||
|
<span class="material-symbols-outlined text-outline-variant group-hover:text-primary transition-colors cursor-pointer">chevron_right</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Right Column: Campaign Builder Panel -->
|
||||||
|
<aside class="space-y-gutter">
|
||||||
|
<div class="bg-white p-container-padding rounded-xl border border-outline-variant shadow-lg sticky top-24">
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<h4 class="font-title-sm text-title-sm flex items-center gap-2">
|
||||||
|
<img alt="AI Icon" class="w-6 h-6 object-contain" src="https://lh3.googleusercontent.com/aida/AP1WRLu1SFz3uW8s6iC8BUAS9XvAFoM_7LQZUzR-UgorcHCSIZ_uRCF-ZTLQnQbNUG13WdRaQDX_3m0ewu6jxJ2Ie-gQvwFXyYdy3ZIxhkl0hJ2VGRZF6Iul1GgmSKzO5x92HASTCa0m0XzXjctyxy5aRgxOTOxhzl-Qz9P5jTlRzXngIWh6bCNZdaVEIxd9H6a2fDdToHYg0gowaU93SV2P5YbT0-8ShD0eeNiQEFHXn4HcsQUCrsiacEeGDZY"/>
|
||||||
|
캠페인 빌더
|
||||||
|
</h4>
|
||||||
|
<span class="material-symbols-outlined text-secondary cursor-pointer">info</span>
|
||||||
|
</div>
|
||||||
|
<!-- Target Segment -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<p class="font-label-md text-label-md text-on-surface mb-3">대상 세그먼트</p>
|
||||||
|
<div class="grid grid-cols-1 gap-2">
|
||||||
|
<label class="flex items-center gap-3 p-2.5 rounded-lg border border-outline-variant hover:bg-surface-container-low transition-colors cursor-pointer">
|
||||||
|
<input checked="" class="w-4 h-4 rounded border-outline-variant text-secondary focus:ring-secondary" type="checkbox"/>
|
||||||
|
<span class="text-body-sm">사전등록자 (3,240명)</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center gap-3 p-2.5 rounded-lg border border-outline-variant hover:bg-surface-container-low transition-colors cursor-pointer">
|
||||||
|
<input class="w-4 h-4 rounded border-outline-variant text-secondary focus:ring-secondary" type="checkbox"/>
|
||||||
|
<span class="text-body-sm">과거 관람객 (12,500명)</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center gap-3 p-2.5 rounded-lg border border-outline-variant hover:bg-surface-container-low transition-colors cursor-pointer">
|
||||||
|
<input class="w-4 h-4 rounded border-outline-variant text-secondary focus:ring-secondary" type="checkbox"/>
|
||||||
|
<span class="text-body-sm">바이어 리스트 (1,820명)</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- AI Drafting -->
|
||||||
|
<div class="mb-6 p-4 bg-secondary-fixed rounded-xl border border-secondary-container/20">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<span class="text-on-secondary-fixed text-label-md font-bold">AI 최적화</span>
|
||||||
|
<span class="material-symbols-outlined text-on-secondary-fixed text-[18px]" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-[11px] text-on-secondary-fixed-variant mb-4 leading-relaxed">세그먼트 성향을 분석하여 오픈율이 가장 높을 것으로 예상되는 카피와 발송 시간을 제안합니다.</p>
|
||||||
|
<button class="w-full bg-secondary-container text-on-secondary-container py-2.5 rounded-lg font-label-md text-label-md flex items-center justify-center gap-2 hover:opacity-90 transition-all active:scale-95">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">temp_preferences_custom</span>
|
||||||
|
AI 카피 초안 생성
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Image Asset Slot -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<p class="font-label-md text-label-md text-on-surface mb-3">메인 이미지 에셋</p>
|
||||||
|
<div class="relative w-full aspect-video rounded-lg overflow-hidden border-2 border-dashed border-outline-variant flex items-center justify-center bg-surface-container hover:border-primary transition-colors cursor-pointer">
|
||||||
|
<img class="absolute inset-0 w-full h-full object-cover opacity-50 group-hover:opacity-70" data-alt="A futuristic, high-tech digital illustration of a nano-banana concept for a smart factory exhibition. The image features glowing neon blueprints of factory automation machinery, microscopic organic patterns in electric blue and purple, and a clean, corporate white background. The style is modern, professional, and sophisticated, reflecting global connectivity and innovation at KINTEX." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBIjd-oCn8idkfrFcL607kpiYpUYYToTAj2GlGWQrq4lJSwqRNltO6XBZKEyMMnoLs0BleDq_3Say9RAU59gjLmt6iNrYZWApCD8QR0HiuvjnEifYmel5FqGMmCM_KlNcU3_sncmWecNaj_dWHg4cXQj1iFgoUWYSlruP93Fhn-J-ZFnPqWsDJ8jlHWHy8EkkJV0dkW1tRSSh-dM7Xg1jE4S4Cg-kMLIfu5nJNQgvuEeLlhKhbFgvoP8D0UuARzfCVH4LphAFmA22I"/>
|
||||||
|
<div class="relative z-10 text-center">
|
||||||
|
<span class="material-symbols-outlined text-outline-variant text-[32px] mb-2">add_photo_alternate</span>
|
||||||
|
<p class="text-label-xs text-outline font-medium">나노바나나 예상 이미지 삽입</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Scheduling Toggle -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<p class="font-label-md text-label-md text-on-surface mb-3">발송 설정</p>
|
||||||
|
<div class="flex gap-2 p-1 bg-surface-container rounded-lg">
|
||||||
|
<button class="flex-1 py-1.5 rounded-md bg-white text-on-surface shadow-sm font-label-md text-[12px] transition-all" id="btn-now" onclick="toggleSchedule(this)">즉시 발송</button>
|
||||||
|
<button class="flex-1 py-1.5 rounded-md text-outline font-label-md text-[12px] transition-all" id="btn-later" onclick="toggleSchedule(this)">예약 발송</button>
|
||||||
|
</div>
|
||||||
|
<div class="hidden mt-3 animate-in fade-in slide-in-from-top-2 duration-300" id="schedule-input">
|
||||||
|
<input class="w-full p-2 rounded-lg border border-outline-variant font-body-sm text-body-sm focus:ring-secondary focus:border-secondary" type="datetime-local"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Preview Frame -->
|
||||||
|
<div class="border border-outline-variant rounded-lg overflow-hidden">
|
||||||
|
<div class="bg-surface-container p-2 text-center border-b border-outline-variant">
|
||||||
|
<span class="text-label-xs font-bold text-outline">미리보기 (Mobile)</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-48 overflow-y-auto p-4 bg-white text-[10px] space-y-3 leading-relaxed">
|
||||||
|
<div class="h-32 w-full bg-surface-container-low rounded-lg mb-2 flex items-center justify-center text-outline-variant italic">
|
||||||
|
[메인 배너 이미지 영역]
|
||||||
|
</div>
|
||||||
|
<p class="font-bold text-title-sm text-[14px] leading-tight">2026 KINTEX 스마트팩토리 엑스포에 초대합니다</p>
|
||||||
|
<p>안녕하세요, 홍길동님. KINTEX가 제안하는 미래 제조 혁신의 현장으로 귀하를 정중히 모십니다...</p>
|
||||||
|
<hr class="border-outline-variant my-4"/>
|
||||||
|
<footer class="text-outline-variant text-[8px] space-y-1">
|
||||||
|
<p>본 메일은 수신동의를 하신 고객님께 발송되었습니다.</p>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="underline cursor-pointer">수신거부</span>
|
||||||
|
<span class="underline cursor-pointer">정보통신망법 수신동의 준수</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Final Action -->
|
||||||
|
<button class="w-full mt-6 bg-primary text-on-primary py-3 rounded-xl font-display-lg text-title-sm shadow-lg hover:shadow-primary/20 active:scale-95 transition-all">
|
||||||
|
캠페인 실행하기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
function toggleSchedule(btn) {
|
||||||
|
const btns = [document.getElementById('btn-now'), document.getElementById('btn-later')];
|
||||||
|
const input = document.getElementById('schedule-input');
|
||||||
|
|
||||||
|
btns.forEach(b => {
|
||||||
|
b.classList.remove('bg-white', 'text-on-surface', 'shadow-sm');
|
||||||
|
b.classList.add('text-outline');
|
||||||
|
});
|
||||||
|
|
||||||
|
btn.classList.add('bg-white', 'text-on-surface', 'shadow-sm');
|
||||||
|
btn.classList.remove('text-outline');
|
||||||
|
|
||||||
|
if (btn.id === 'btn-later') {
|
||||||
|
input.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
input.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simple scale effect for interactive elements
|
||||||
|
document.querySelectorAll('button, a, .group').forEach(el => {
|
||||||
|
el.addEventListener('mousedown', () => {
|
||||||
|
el.style.transform = 'scale(0.98)';
|
||||||
|
});
|
||||||
|
el.addEventListener('mouseup', () => {
|
||||||
|
el.style.transform = '';
|
||||||
|
});
|
||||||
|
el.addEventListener('mouseleave', () => {
|
||||||
|
el.style.transform = '';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
439
stitch_kintex_ai_system_architect/scr_34_sponsorship/code.html
Normal file
439
stitch_kintex_ai_system_architect/scr_34_sponsorship/code.html
Normal file
@ -0,0 +1,439 @@
|
|||||||
|
<!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 AI - Sponsorship & Sales Manager</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=Noto+Sans+KR:wght@400;500;700&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"/>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', 'Noto Sans KR', sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(193, 199, 211, 0.5);
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: #c1c7d3;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.tier-card {
|
||||||
|
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
.tier-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"primary": "#003765",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"outline": "#727781",
|
||||||
|
"on-primary-fixed-variant": "#004881"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-md": "16px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"title-sm": ["Inter", "Noto Sans KR"],
|
||||||
|
"label-xs": ["Inter"],
|
||||||
|
"label-md": ["Inter"],
|
||||||
|
"body-sm": ["Inter", "Noto Sans KR"],
|
||||||
|
"display-lg": ["Inter", "Noto Sans KR"],
|
||||||
|
"headline-md": ["Inter", "Noto Sans KR"],
|
||||||
|
"body-base": ["Inter", "Noto Sans KR"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-surface">
|
||||||
|
<!-- Side Navigation Bar -->
|
||||||
|
<aside class="fixed left-0 top-0 h-screen w-[240px] bg-surface-container-lowest border-r border-outline-variant flex flex-col py-stack-lg z-50">
|
||||||
|
<div class="px-gutter mb-10">
|
||||||
|
<img alt="KINTEX Logo" class="h-8 w-auto object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBpmxW0_W76w1IvseAoAzj5b7yfyhipKotxPrm_JIKPTc4IFprUAvfgWMXvPXtJYqM0cir2Yz1cISoFLiL7emJDpIc0HIHBb9hocUmpdHOEk5FY6ZUIDdoPv4txX9vzVKPy82xzCGbPO6ab3AzhRInSaywerIhEFzJOhT2plBFpE5-_jOlu99a8DPnF3OQ6ryQ4EwpVXKgCHGCAs59awcRxdJy2RLWhQzLbe4hSXUYXwFBtBJVBbxBfrhfd_BXif-9aZNEjn2LKKWQ"/>
|
||||||
|
<div class="mt-4">
|
||||||
|
<p class="font-headline-md text-headline-md font-bold text-primary">KINTEX Sales</p>
|
||||||
|
<p class="font-title-sm text-label-md text-on-surface-variant opacity-70">Exhibition Manager</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-grow space-y-1">
|
||||||
|
<!-- Dashboard -->
|
||||||
|
<a class="flex items-center px-6 py-3 text-on-surface-variant font-medium hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">dashboard</span>
|
||||||
|
<span class="font-label-md text-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<!-- Exhibitors -->
|
||||||
|
<a class="flex items-center px-6 py-3 text-on-surface-variant font-medium hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">groups</span>
|
||||||
|
<span class="font-label-md text-label-md">Exhibitors</span>
|
||||||
|
</a>
|
||||||
|
<!-- Sponsorships (Active) -->
|
||||||
|
<a class="flex items-center px-6 py-3 text-primary font-bold border-r-4 border-primary bg-primary-container/10 transition-transform active:scale-95" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3" style="font-variation-settings: 'FILL' 1;">loyalty</span>
|
||||||
|
<span class="font-label-md text-label-md">Sponsorships</span>
|
||||||
|
</a>
|
||||||
|
<!-- Sales Pipeline -->
|
||||||
|
<a class="flex items-center px-6 py-3 text-on-surface-variant font-medium hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">payments</span>
|
||||||
|
<span class="font-label-md text-label-md">Sales Pipeline</span>
|
||||||
|
</a>
|
||||||
|
<!-- Analytics -->
|
||||||
|
<a class="flex items-center px-6 py-3 text-on-surface-variant font-medium hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">analytics</span>
|
||||||
|
<span class="font-label-md text-label-md">Analytics</span>
|
||||||
|
</a>
|
||||||
|
<!-- Settings -->
|
||||||
|
<a class="flex items-center px-6 py-3 text-on-surface-variant font-medium hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">settings</span>
|
||||||
|
<span class="font-label-md text-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="px-gutter mt-auto pt-stack-lg border-t border-outline-variant space-y-1">
|
||||||
|
<button class="w-full bg-primary text-on-primary py-3 px-4 rounded-lg font-bold text-label-md flex items-center justify-center gap-2 mb-4 hover:bg-primary-container transition-all">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">add_circle</span>
|
||||||
|
New Sales Lead
|
||||||
|
</button>
|
||||||
|
<a class="flex items-center px-2 py-2 text-on-surface-variant font-medium hover:bg-surface-container-high transition-colors text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">help</span>
|
||||||
|
Help Center
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-2 py-2 text-on-surface-variant font-medium hover:bg-surface-container-high transition-colors text-label-md text-error" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">logout</span>
|
||||||
|
Log Out
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<main class="ml-[240px] min-h-screen flex flex-col">
|
||||||
|
<!-- Top Nav Bar -->
|
||||||
|
<header class="h-16 bg-surface-bright border-b border-outline-variant flex justify-between items-center px-gutter sticky top-0 z-40">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<h1 class="font-headline-md text-headline-md font-bold text-primary">Sponsorship & Sales Manager</h1>
|
||||||
|
<div class="h-6 w-[1px] bg-outline-variant"></div>
|
||||||
|
<div class="flex gap-6">
|
||||||
|
<a class="text-on-surface-variant hover:text-primary font-medium text-body-base" href="#">Q3 Report</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary font-medium text-body-base" href="#">Sales Target</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary font-medium text-body-base" href="#">Contact Support</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button class="material-symbols-outlined text-on-surface-variant p-2 rounded-full hover:bg-surface-container transition-all">notifications</button>
|
||||||
|
<button class="material-symbols-outlined text-on-surface-variant p-2 rounded-full hover:bg-surface-container transition-all">settings</button>
|
||||||
|
<div class="flex items-center gap-2 pl-2">
|
||||||
|
<img class="w-8 h-8 rounded-full border border-outline-variant" data-alt="A professional headshot of a corporate exhibition manager in their late 30s, wearing a navy blue blazer over a crisp white shirt. The background is a blurred office setting with high-end architectural details. The lighting is soft and flattering, creating a polished and trustworthy executive profile image for a business dashboard application." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCoc-dHgz8u2mHORlV01nhtu4QUoFeH4MIBmMf2sYKAxmRvL8iNDTfVcV5i08jvujHxPlqS9whVVIxKA362ca9NOByfty7q8UoWFwhGlOBtREhioMLLMp0-jmm7QvOhlF9nfINxdpcnsxihpLawNZpn0rHseHXeNnv324xqHfCQKCknzJaLRQq_kYHBuCkQNi40O72Hag89JnpZq4aO4zTSxXT0NRFAA8i4xKqygj9EGbyGM-NJlKHD0NmWf0q_bmbqFJ8C1fnY2VA"/>
|
||||||
|
<span class="text-body-base font-semibold">Admin User</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Page Content -->
|
||||||
|
<div class="p-8 space-y-8 max-w-[1440px] mx-auto w-full">
|
||||||
|
<!-- KPI Cards Row -->
|
||||||
|
<section class="grid grid-cols-4 gap-gutter">
|
||||||
|
<div class="bg-surface-container-lowest p-stack-lg rounded-xl border border-outline-variant flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-on-surface-variant font-label-md text-label-md mb-1">스폰서</p>
|
||||||
|
<p class="text-headline-md font-bold text-primary">18</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-primary-fixed p-3 rounded-full">
|
||||||
|
<span class="material-symbols-outlined text-on-primary-fixed">partner_heart</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest p-stack-lg rounded-xl border border-outline-variant flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-on-surface-variant font-label-md text-label-md mb-1">판매액</p>
|
||||||
|
<p class="text-headline-md font-bold text-primary">₩420.0M</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-secondary-fixed p-3 rounded-full">
|
||||||
|
<span class="material-symbols-outlined text-on-secondary-fixed">payments</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest p-stack-lg rounded-xl border border-outline-variant flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-on-surface-variant font-label-md text-label-md mb-1">잔여 패키지</p>
|
||||||
|
<p class="text-headline-md font-bold text-secondary">6</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-high p-3 rounded-full">
|
||||||
|
<span class="material-symbols-outlined text-on-surface">inventory_2</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest p-stack-lg rounded-xl border border-outline-variant flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-on-surface-variant font-label-md text-label-md mb-1">이행물 진행</p>
|
||||||
|
<p class="text-headline-md font-bold text-tertiary-container">72%</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-tertiary-fixed p-3 rounded-full">
|
||||||
|
<span class="material-symbols-outlined text-on-tertiary-fixed">task_alt</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Main Dashboard Layout -->
|
||||||
|
<div class="grid grid-cols-3 gap-stack-lg">
|
||||||
|
<!-- Left 2/3: Sponsorship Tiers -->
|
||||||
|
<section class="col-span-2 space-y-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h2 class="font-headline-md text-headline-md text-on-surface">Sponsorship Tiers</h2>
|
||||||
|
<button class="text-primary font-bold text-label-md hover:underline">패키지 설정 관리</button>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-3 gap-6">
|
||||||
|
<!-- Diamond Tier -->
|
||||||
|
<div class="tier-card bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden flex flex-col border-l-4 border-l-[#FFD700]">
|
||||||
|
<div class="p-stack-lg flex-grow">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span class="bg-[#FFD700]/10 text-[#B8860B] px-3 py-1 rounded-full text-label-md font-bold uppercase tracking-wider">Diamond</span>
|
||||||
|
<span class="bg-error text-on-error px-2 py-0.5 rounded text-label-xs font-bold">D-12</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-title-sm font-bold mb-1">다이아몬드</h3>
|
||||||
|
<p class="text-headline-md font-extrabold text-primary mb-6">₩50,000,000</p>
|
||||||
|
<ul class="space-y-4 mb-8">
|
||||||
|
<li class="flex items-start gap-3 text-body-sm text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[20px]">check_circle</span>
|
||||||
|
메인 로고 노출 (온/오프라인)
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3 text-body-sm text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[20px]">check_circle</span>
|
||||||
|
전시 부스 100sqm (최우선 배정)
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3 text-body-sm text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[20px]">check_circle</span>
|
||||||
|
연사 세션 2회 기회 부여
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-lg bg-surface-container-low border-t border-outline-variant flex justify-between items-center">
|
||||||
|
<p class="text-label-md font-bold text-on-surface-variant">잔여 <span class="text-primary">1</span></p>
|
||||||
|
<button class="bg-primary text-on-primary px-4 py-2 rounded font-bold text-label-md hover:opacity-90">선택</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Gold Tier -->
|
||||||
|
<div class="tier-card bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden flex flex-col border-l-4 border-l-outline-variant opacity-80 grayscale-[0.5]">
|
||||||
|
<div class="p-stack-lg flex-grow">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span class="bg-outline-variant/20 text-on-surface-variant px-3 py-1 rounded-full text-label-md font-bold uppercase tracking-wider">Gold</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-title-sm font-bold mb-1">골드</h3>
|
||||||
|
<p class="text-headline-md font-extrabold text-primary mb-6">₩30,000,000</p>
|
||||||
|
<ul class="space-y-4 mb-8">
|
||||||
|
<li class="flex items-start gap-3 text-body-sm text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[20px]">check_circle</span>
|
||||||
|
서브 로고 노출
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3 text-body-sm text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[20px]">check_circle</span>
|
||||||
|
전시 부스 50sqm
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3 text-body-sm text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[20px]">check_circle</span>
|
||||||
|
연사 세션 1회
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-lg bg-surface-container-low border-t border-outline-variant flex justify-between items-center">
|
||||||
|
<p class="text-label-md font-bold text-error">판매 완료</p>
|
||||||
|
<button class="bg-outline text-on-surface-variant px-4 py-2 rounded font-bold text-label-md cursor-not-allowed" disabled="">종료</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Silver Tier -->
|
||||||
|
<div class="tier-card bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden flex flex-col border-l-4 border-l-[#CD7F32]">
|
||||||
|
<div class="p-stack-lg flex-grow">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span class="bg-[#CD7F32]/10 text-[#8B4513] px-3 py-1 rounded-full text-label-md font-bold uppercase tracking-wider">Silver</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-title-sm font-bold mb-1">실버</h3>
|
||||||
|
<p class="text-headline-md font-extrabold text-primary mb-6">₩15,000,000</p>
|
||||||
|
<ul class="space-y-4 mb-8">
|
||||||
|
<li class="flex items-start gap-3 text-body-sm text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[20px]">check_circle</span>
|
||||||
|
일반 로고 노출
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3 text-body-sm text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[20px]">check_circle</span>
|
||||||
|
전시 부스 20sqm
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-lg bg-surface-container-low border-t border-outline-variant flex justify-between items-center">
|
||||||
|
<p class="text-label-md font-bold text-on-surface-variant">잔여 <span class="text-primary">3</span></p>
|
||||||
|
<button class="bg-primary text-on-primary px-4 py-2 rounded font-bold text-label-md hover:opacity-90">선택</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Additional Content Block for Context -->
|
||||||
|
<div class="bg-surface-container-high rounded-xl p-8 flex items-center justify-between border border-outline-variant">
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<div class="bg-white p-4 rounded-lg shadow-sm">
|
||||||
|
<img alt="Calendar" class="w-12 h-12" src="https://lh3.googleusercontent.com/aida/AP1WRLvpb_qiARCcrTrv6YnOIVjyk5szWwIfCGaaCmyRAnuu9aficeKfPTRrRHDgl4gJCHQUc7LYwtF1Ak04oSwBAezPs20C51ZjzHDaBCkRYJaYqHS-DOPHSGLdeLL_S2tlRlUAG-XF_ib2I1Svtqq26yY0uxmEQA5cWHJabFRv_0WVtBKiSP2QbCssxeccpcVHcWr_6CJ6zXonlepkxJcDXURlfHpvg7P2-O1urNto3A0xsepsB1ucua9Vnw"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-title-sm text-title-sm text-on-surface">스폰서십 체결 일정</h4>
|
||||||
|
<p class="text-body-sm text-on-surface-variant">최종 마감일까지 14일 남았습니다. 주요 기업 팔로업이 필요합니다.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="text-primary font-bold px-6 py-3 rounded border-2 border-primary hover:bg-primary/5 transition-all">전체 일정 보기</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Right 1/3: Sponsor Management Panel -->
|
||||||
|
<section class="space-y-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h2 class="font-headline-md text-headline-md text-on-surface">스폰서 관리</h2>
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer">filter_list</span>
|
||||||
|
</div>
|
||||||
|
<!-- Active Sponsors List -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden flex flex-col shadow-sm">
|
||||||
|
<div class="p-4 border-b border-outline-variant bg-surface-container-low">
|
||||||
|
<div class="relative">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span>
|
||||||
|
<input class="w-full bg-white border border-outline-variant rounded-full py-2 pl-10 pr-4 text-body-sm focus:ring-primary focus:border-primary" placeholder="스폰서 검색..." type="text"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="max-h-[300px] overflow-y-auto custom-scrollbar">
|
||||||
|
<div class="p-4 flex items-center justify-between hover:bg-surface-container-low cursor-pointer border-l-4 border-primary bg-primary-container/5 transition-colors">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded bg-primary-fixed flex items-center justify-center text-primary font-bold">T</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-bold text-body-base">(주)테크솔루션</p>
|
||||||
|
<p class="text-label-xs text-on-surface-variant">다이아몬드 패키지</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="bg-tertiary-fixed text-on-tertiary-fixed-variant px-2 py-0.5 rounded text-label-xs font-bold">계약완료</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 flex items-center justify-between hover:bg-surface-container-low cursor-pointer border-b border-outline-variant/30 transition-colors">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded bg-secondary-fixed flex items-center justify-center text-secondary font-bold">G</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-bold text-body-base">글로벌바이오</p>
|
||||||
|
<p class="text-label-xs text-on-surface-variant">골드 패키지</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="bg-surface-container-high text-on-surface-variant px-2 py-0.5 rounded text-label-xs font-bold">결제대기</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 flex items-center justify-between hover:bg-surface-container-low cursor-pointer border-b border-outline-variant/30 transition-colors">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded bg-surface-dim flex items-center justify-center text-on-surface font-bold">N</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-bold text-body-base">넥스트 인더스트리</p>
|
||||||
|
<p class="text-label-xs text-on-surface-variant">실버 패키지</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="bg-tertiary-fixed text-on-tertiary-fixed-variant px-2 py-0.5 rounded text-label-xs font-bold">계약완료</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Fulfillment Checklist -->
|
||||||
|
<div class="p-stack-lg bg-surface-container-low border-t border-outline-variant">
|
||||||
|
<h4 class="font-label-md text-label-md text-on-surface uppercase tracking-tight mb-4 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">fact_check</span>
|
||||||
|
(주)테크솔루션 이행 현황
|
||||||
|
</h4>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer group">
|
||||||
|
<input checked="" class="rounded border-outline-variant text-primary focus:ring-primary h-5 w-5" type="checkbox"/>
|
||||||
|
<span class="text-body-sm text-on-surface group-hover:text-primary">공식 홈페이지 로고 노출</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer group">
|
||||||
|
<input checked="" class="rounded border-outline-variant text-primary focus:ring-primary h-5 w-5" type="checkbox"/>
|
||||||
|
<span class="text-body-sm text-on-surface group-hover:text-primary">전시 홀 부스 배정 (A-101)</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer group">
|
||||||
|
<input class="rounded border-outline-variant text-primary focus:ring-primary h-5 w-5" type="checkbox"/>
|
||||||
|
<span class="text-body-sm text-on-surface group-hover:text-primary">연사 세션 주제 선정</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer group">
|
||||||
|
<input class="rounded border-outline-variant text-primary focus:ring-primary h-5 w-5" type="checkbox"/>
|
||||||
|
<span class="text-body-sm text-on-surface group-hover:text-primary">브로슈어 광고 인쇄</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<a class="mt-8 flex items-center justify-between bg-primary-container/20 p-4 rounded-lg group hover:bg-primary-container/30 transition-all" href="#">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<img alt="Dashboard" class="w-8 h-8" src="https://lh3.googleusercontent.com/aida/AP1WRLtO2EjzKAcW5wn4YYTv12rmtFAvwxlN4fmvGGktwdLqfBGzTTC8C_nxjBMV0s73Yz_eqq3my6ASAxnQk9MMCNSeoTVuQwK9CU8en_ZU63PoTk6muzScTpKFEU2aFgRqpZAs3IBLHhlZXl4ENmWt1GO_lvpxzlx-FAVMFPeSHBfqi8lMEy8xvdRkiRB0MpVPgcEnBWn0SU0BsxlrRVjlVMlL3gAwpYNlLruSqKP5tDnBgDNwjHSKU9SUV04"/>
|
||||||
|
<span class="font-bold text-label-md text-primary">노출·리드·ROI 대시보드</span>
|
||||||
|
</div>
|
||||||
|
<span class="material-symbols-outlined text-primary group-hover:translate-x-1 transition-transform">arrow_forward</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Footer for context -->
|
||||||
|
<footer class="mt-auto p-gutter text-center border-t border-outline-variant bg-surface-container-low">
|
||||||
|
<p class="text-label-xs text-on-surface-variant font-medium">© 2024 KINTEX Sponsorship Sales AI System. For internal administrative use only.</p>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
<!-- FAB for quick action (as per design rules) -->
|
||||||
|
<button class="fixed bottom-8 right-8 bg-secondary text-on-secondary w-14 h-14 rounded-full shadow-lg flex items-center justify-center hover:scale-110 transition-transform z-50">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'wght' 600;">add</span>
|
||||||
|
</button>
|
||||||
|
</body></html>
|
||||||
395
stitch_kintex_ai_system_architect/scr_35_cms_workflow/code.html
Normal file
395
stitch_kintex_ai_system_architect/scr_35_cms_workflow/code.html
Normal file
@ -0,0 +1,395 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>KINTEX CMS - Content Publishing Workflow</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@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"/>
|
||||||
|
<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": {
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"outline": "#727781",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"primary": "#003765",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"on-error-container": "#93000a"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"base": "4px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"display-lg-mobile": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body { font-family: 'Inter', sans-serif; background-color: #faf8ff; }
|
||||||
|
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
||||||
|
.glass-panel { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); }
|
||||||
|
.editor-container { height: calc(100vh - 64px); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-surface">
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="flex justify-between items-center w-full px-container-padding h-16 sticky top-0 z-50 bg-surface-bright border-b border-outline-variant">
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<span class="text-headline-md font-headline-md font-bold text-primary">KINTEX CMS</span>
|
||||||
|
<div class="hidden md:flex items-center ml-8 gap-stack-lg">
|
||||||
|
<nav class="flex gap-stack-md">
|
||||||
|
<a class="text-primary font-bold border-b-2 border-primary text-label-md font-label-md py-5" href="#">Content Hub</a>
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-container-low transition-colors text-label-md font-label-md py-5" href="#">Analytics</a>
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-container-low transition-colors text-label-md font-label-md py-5" href="#">Settings</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<div class="relative">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
||||||
|
<input class="pl-10 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-full text-body-sm w-64 focus:ring-2 focus:ring-primary outline-none" placeholder="검색..." type="text"/>
|
||||||
|
</div>
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-low rounded-full transition-colors">
|
||||||
|
<span class="material-symbols-outlined">notifications</span>
|
||||||
|
</button>
|
||||||
|
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg text-label-md font-label-md font-semibold hover:opacity-90 transition-opacity">
|
||||||
|
Save Draft
|
||||||
|
</button>
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container-high overflow-hidden border border-outline-variant">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A professional headshot of a business administrator in a sharp navy suit, lit with clean studio lighting against a soft gray background, representing a high-level CMS user profile." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAqk3I4MFteWFMBQwQB6FK8BzyB20dwTRHH5urizAdcerxyYtC3ah8-je_RMU5wpfo3trwbosEZhUtjqUWL2lV6U5MVODRBdSskZx72Shz4k0t70Fxb7aYKjHGADbQa44OYHTVVNg5orWl2rGRkWRzJSRogosSz7KsExmBapqivwlJcdbdDwVYCixyQjuopAXJA3ewsCQTVFo0yz0om8FTPXnQRw5fCtvekpuGmr-vkKpZeXHYE6mqQtHZa6G1Waqh1QhfXGilGqeM"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="flex editor-container overflow-hidden">
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<aside class="fixed left-0 top-0 h-screen flex flex-col p-stack-md z-40 bg-surface-container-low border-r border-outline-variant w-64 pt-20">
|
||||||
|
<div class="mb-8 px-4">
|
||||||
|
<img alt="KINTEX Logo" class="h-8 w-auto mb-4" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAm5hp64QZLvzTJxp4zntrdm8Jn03ThGRPjUp1iVNB2yJg7ahN5sSzubjs9Qhsif7EkQr1oc5PWvb-vIAetO4b-Cp3b5CFFcMQMX1dIr3wMIYzkXPvZ8eKhDZ8-WldHZY0LyOLxv60Fe9Tx_GM_B5Q-Svj0NXUkOm-ScRyJuIUKDAQ312K7KEoUezQRakP-UxHVwD1Lv3va4MGdt6HSpGbBU6yPewnCnCtb49CG0KbqpNo8PBRpvtuaRN7xJ0sTh8LjadWP-rwiUlY"/>
|
||||||
|
<div class="text-title-sm font-title-sm font-extrabold text-on-surface">Global Admin</div>
|
||||||
|
<div class="text-body-sm font-body-sm text-on-surface-variant">Exhibition Management</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex flex-col gap-base flex-grow">
|
||||||
|
<a class="flex items-center gap-stack-sm text-on-surface-variant hover:bg-surface-container-high px-4 py-2 rounded-lg transition-all text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span> Dashboard
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-sm text-on-surface-variant hover:bg-surface-container-high px-4 py-2 rounded-lg transition-all text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">event</span> Exhibitions
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-sm bg-secondary-container text-on-secondary-container rounded-lg px-4 py-2 font-semibold text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">article</span> Content Hub
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-sm text-on-surface-variant hover:bg-surface-container-high px-4 py-2 rounded-lg transition-all text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">perm_media</span> Media Library
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-sm text-on-surface-variant hover:bg-surface-container-high px-4 py-2 rounded-lg transition-all text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">insights</span> Analytics
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-sm text-on-surface-variant hover:bg-surface-container-high px-4 py-2 rounded-lg transition-all text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">admin_panel_settings</span> User Access
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="mt-auto border-t border-outline-variant pt-4 flex flex-col gap-base">
|
||||||
|
<a class="flex items-center gap-stack-sm text-on-surface-variant hover:bg-surface-container-high px-4 py-2 rounded-lg text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">contact_support</span> Support
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-sm text-on-surface-variant hover:bg-surface-container-high px-4 py-2 rounded-lg text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">memory</span> System Status
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Main CMS Workspace -->
|
||||||
|
<main class="ml-64 flex-grow grid grid-cols-12 gap-0 overflow-hidden">
|
||||||
|
<!-- Left Column: Content List -->
|
||||||
|
<section class="col-span-3 border-r border-outline-variant flex flex-col bg-surface-container-lowest">
|
||||||
|
<div class="p-stack-md border-b border-outline-variant">
|
||||||
|
<div class="flex gap-stack-sm mb-stack-md">
|
||||||
|
<button class="px-3 py-1 bg-primary-fixed text-on-primary-fixed text-label-md font-label-md rounded-full">한국어</button>
|
||||||
|
<button class="px-3 py-1 hover:bg-surface-container-low text-on-surface-variant text-label-md font-label-md rounded-full transition-colors">English</button>
|
||||||
|
<button class="px-3 py-1 hover:bg-surface-container-low text-on-surface-variant text-label-md font-label-md rounded-full transition-colors">日本語</button>
|
||||||
|
<button class="px-3 py-1 hover:bg-surface-container-low text-on-surface-variant text-label-md font-label-md rounded-full transition-colors">中文</button>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant scale-75">search</span>
|
||||||
|
<input class="w-full pl-9 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-lg text-body-sm focus:ring-1 focus:ring-primary outline-none" placeholder="콘텐츠 검색" type="text"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow overflow-y-auto p-stack-sm">
|
||||||
|
<div class="flex flex-col gap-base">
|
||||||
|
<div class="flex items-center justify-between p-stack-sm hover:bg-surface-container-low rounded-lg group cursor-pointer transition-colors">
|
||||||
|
<div class="flex items-center gap-stack-sm">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant text-[20px]">description</span>
|
||||||
|
<span class="text-body-sm font-body-sm">페이지</span>
|
||||||
|
</div>
|
||||||
|
<span class="px-2 py-0.5 bg-surface-variant text-on-surface-variant text-label-xs font-label-xs rounded">게시</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-stack-sm hover:bg-surface-container-low rounded-lg group cursor-pointer transition-colors">
|
||||||
|
<div class="flex items-center gap-stack-sm">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant text-[20px]">campaign</span>
|
||||||
|
<span class="text-body-sm font-body-sm">공지사항</span>
|
||||||
|
</div>
|
||||||
|
<span class="px-2 py-0.5 bg-error-container text-error text-label-xs font-label-xs rounded">초안</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-stack-sm bg-primary-container text-on-primary-container rounded-lg cursor-pointer">
|
||||||
|
<div class="flex items-center gap-stack-sm">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">info</span>
|
||||||
|
<span class="text-body-sm font-semibold">행사 소개</span>
|
||||||
|
</div>
|
||||||
|
<span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 text-label-xs font-label-xs rounded">검수 중</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-stack-sm hover:bg-surface-container-low rounded-lg group cursor-pointer transition-colors">
|
||||||
|
<div class="flex items-center gap-stack-sm">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant text-[20px]">person</span>
|
||||||
|
<span class="text-body-sm font-body-sm">연사 정보</span>
|
||||||
|
</div>
|
||||||
|
<span class="px-2 py-0.5 bg-green-100 text-green-800 text-label-xs font-label-xs rounded">게시 완료</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-stack-sm hover:bg-surface-container-low rounded-lg group cursor-pointer transition-colors">
|
||||||
|
<div class="flex items-center gap-stack-sm">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant text-[20px]">help</span>
|
||||||
|
<span class="text-body-sm font-body-sm">FAQ</span>
|
||||||
|
</div>
|
||||||
|
<span class="px-2 py-0.5 bg-green-100 text-green-800 text-label-xs font-label-xs rounded">게시 완료</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Center Column: Editor -->
|
||||||
|
<section class="col-span-6 flex flex-col bg-surface-bright overflow-y-auto">
|
||||||
|
<div class="max-w-3xl mx-auto w-full p-container-padding py-stack-lg">
|
||||||
|
<div class="mb-stack-lg">
|
||||||
|
<label class="block text-label-md font-label-md text-on-surface-variant mb-base">제목</label>
|
||||||
|
<input class="w-full text-display-lg font-display-lg bg-transparent border-b border-outline-variant focus:border-primary outline-none pb-2 placeholder-on-surface-variant" type="text" value="행사 소개"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-stack-sm border border-outline-variant rounded-lg bg-surface-container-lowest p-2 mb-stack-md sticky top-0 z-10 shadow-sm">
|
||||||
|
<button class="p-1.5 hover:bg-surface-container-low rounded"><span class="material-symbols-outlined text-[20px]">format_bold</span></button>
|
||||||
|
<button class="p-1.5 hover:bg-surface-container-low rounded"><span class="material-symbols-outlined text-[20px]">format_italic</span></button>
|
||||||
|
<button class="p-1.5 hover:bg-surface-container-low rounded"><span class="material-symbols-outlined text-[20px]">link</span></button>
|
||||||
|
<div class="w-px h-4 bg-outline-variant mx-1"></div>
|
||||||
|
<button class="p-1.5 hover:bg-surface-container-low rounded"><span class="material-symbols-outlined text-[20px]">format_list_bulleted</span></button>
|
||||||
|
<button class="p-1.5 hover:bg-surface-container-low rounded"><span class="material-symbols-outlined text-[20px]">image</span></button>
|
||||||
|
<button class="p-1.5 hover:bg-surface-container-low rounded"><span class="material-symbols-outlined text-[20px]">smart_button</span></button>
|
||||||
|
</div>
|
||||||
|
<div class="mb-stack-lg">
|
||||||
|
<div class="flex items-center justify-between mb-stack-sm">
|
||||||
|
<span class="text-label-md font-label-md text-on-surface-variant">미디어 라이브러리</span>
|
||||||
|
<button class="text-primary text-label-md font-label-md hover:underline">전체보기</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-stack-sm overflow-x-auto pb-2 scrollbar-hide">
|
||||||
|
<div class="flex-shrink-0 w-32 h-24 rounded-lg overflow-hidden border border-outline-variant relative group">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A high-resolution photograph of the KINTEX smart factory exhibition floor, showing advanced robotic arms and vibrant neon blue lighting, capturing the scale and future-focused technological atmosphere of the venue." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDCU4HA3zilpSkwVvKDJ19qbfaGz63eMF_abLxBjHeT0tJ8kA9wt3B9DLiBgSZ46uDkdwprXM-xAoJt6skBpeIclO4CvRO4y-EK1u_gguCHek4kU_r93NzCMl1F57bKNuh-R_3_uzDAEDIjki_9uNc6r_Jl28Mq_BTLnSqAMTBxlFQl5g6FXzQhrPyr38kQtb9bX4NLgCU_0elTmPX0uFse66PQZwSz32bAQcAd_PYtivw5CItRLLXyGDu0xsT6cfPCg7YU79XC5kM"/>
|
||||||
|
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-white">add_circle</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-shrink-0 w-32 h-24 rounded-lg overflow-hidden border border-outline-variant relative group">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A wide-angle architectural shot of the KINTEX exhibition hall, featuring a massive glass ceiling that floods the space with natural light, showcasing a modern corporate event with many attendees." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAu_4ZC-0o6tCp_6A8n3QZpbq-NBw73DtOnzX6ldE3HsvZ3p1nYzdjHRWH_AIn92bx9N8DDMCo9yBY4246krEKIneQDJQMcNdrxKuq4WFv4HGozcEOhMScLutgSMHD5LUVtT-VqlgjDEB6hln9RavNJeeD7nsYQoXlA52kPPb_mgslLMkhUUvLxvUHLv93G5sTuYtf9odxq6TiAGAa9qygiJXj9QY8WWl8hMG-M8kDT7sv9pY22AM3FdOLXhgbyVa77ePhyJeRhDzs"/>
|
||||||
|
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-white">add_circle</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-shrink-0 w-32 h-24 rounded-lg bg-surface-container-low flex items-center justify-center border border-dashed border-outline-variant hover:bg-surface-container-high transition-colors cursor-pointer">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant">add_photo_alternate</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Content Blocks -->
|
||||||
|
<div class="space-y-stack-md">
|
||||||
|
<!-- Block 1: Image -->
|
||||||
|
<div class="relative rounded-xl overflow-hidden border border-outline-variant group">
|
||||||
|
<img class="w-full h-64 object-cover" data-alt="A wide cinematic shot of a modern exhibition hall with futuristic glowing elements and blue neon highlights, emphasizing a professional corporate atmosphere at KINTEX." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD130FCzvP0yZkR2SylRLH9ZSZvyCzr1q1a-chKBXmUqqSu5JeUiSd0DR0gK_onTYep5hKt4iTosB8m8eY9C2FQV8qfwUbrnlukxRDx94YiHTpH632-9UDAinblMfheeDRzvZbtFYIvdAoUACltpRgtOhwzLkqf0axUlOc5MLfLYZVuBfz6fX811LbcTWb3CPtcFkx1oSNfQqjOzRIYVqSIWmr2dIvr7dlCxU81vG0JKWVb6Yb7CquG6Z9mY6J1JY8dLV-0-a1yUMA"/>
|
||||||
|
<div class="absolute top-2 right-2 flex gap-base opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<button class="p-2 bg-surface rounded-full shadow-md hover:bg-surface-container-high"><span class="material-symbols-outlined text-[18px]">drag_indicator</span></button>
|
||||||
|
<button class="p-2 bg-surface rounded-full shadow-md text-error hover:bg-error-container"><span class="material-symbols-outlined text-[18px]">delete</span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Block 2: Text -->
|
||||||
|
<div class="p-stack-md bg-surface-container-lowest border border-outline-variant rounded-xl group relative">
|
||||||
|
<p class="text-body-base font-body-base leading-relaxed">
|
||||||
|
KINTEX 스마트 팩토리 엑스포 2045는 글로벌 제조 혁신을 선도하는 최첨단 기술의 집약체입니다. 이번 전시에서는 AI 기반의 자동화 솔루션, 협동 로봇, 그리고 데이터 중심의 생산 최적화 기술을 한자리에서 만나보실 수 있습니다.
|
||||||
|
</p>
|
||||||
|
<div class="absolute -left-10 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<button class="p-2 text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined">drag_indicator</span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Block 3: AI Summary Block -->
|
||||||
|
<div class="p-stack-md border-2 border-secondary/30 bg-secondary-fixed/10 rounded-xl relative overflow-hidden group">
|
||||||
|
<div class="flex items-center gap-stack-sm mb-stack-sm">
|
||||||
|
<span class="material-symbols-outlined text-secondary scale-75" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
<span class="text-label-md font-label-md text-secondary font-bold">AI 요약 정보</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface italic">
|
||||||
|
"글로벌 제조 혁신의 중심, AI와 로봇 공학의 결합을 통해 미래 산업의 청사진을 제시하는 전시회입니다."
|
||||||
|
</p>
|
||||||
|
<div class="absolute -right-4 -bottom-4 opacity-10">
|
||||||
|
<span class="material-symbols-outlined text-[80px] text-secondary">auto_awesome</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Scheduling Section -->
|
||||||
|
<div class="mt-section-padding/4 pt-stack-lg border-t border-outline-variant">
|
||||||
|
<h3 class="text-title-sm font-title-sm mb-stack-sm">예약 게시 설정</h3>
|
||||||
|
<div class="flex items-center gap-stack-md p-stack-md bg-surface-container-low border border-outline-variant rounded-lg">
|
||||||
|
<div class="flex items-center gap-stack-sm text-primary">
|
||||||
|
<span class="material-symbols-outlined">calendar_today</span>
|
||||||
|
<span class="text-body-base font-semibold">2026.08.01</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-outline-variant"></div>
|
||||||
|
<div class="flex items-center gap-stack-sm text-primary">
|
||||||
|
<span class="material-symbols-outlined">schedule</span>
|
||||||
|
<span class="text-body-base font-semibold">09:00</span>
|
||||||
|
</div>
|
||||||
|
<button class="ml-auto text-on-surface-variant hover:bg-surface-container-high p-2 rounded-full"><span class="material-symbols-outlined">edit</span></button>
|
||||||
|
</div>
|
||||||
|
</div></div></section>
|
||||||
|
<!-- Right Column: Publishing & Workflow -->
|
||||||
|
<section class="col-span-3 border-l border-outline-variant bg-surface-container-low flex flex-col p-container-padding">
|
||||||
|
<div class="mb-stack-lg">
|
||||||
|
<h2 class="text-title-sm font-title-sm text-on-surface mb-stack-md">게시 워크플로</h2>
|
||||||
|
<div class="flex flex-col gap-stack-sm">
|
||||||
|
<button class="w-full py-3 px-4 border border-outline text-on-surface hover:bg-surface-container-high rounded-lg text-label-md font-label-md font-semibold transition-colors">
|
||||||
|
검수 요청
|
||||||
|
</button>
|
||||||
|
<button class="w-full py-3 px-4 bg-primary text-on-primary hover:opacity-90 rounded-lg text-label-md font-label-md font-semibold transition-opacity flex items-center justify-center gap-stack-sm shadow-md">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">publish</span> 최종 승인 및 게시
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-stack-lg">
|
||||||
|
<div class="flex items-center justify-between mb-stack-sm">
|
||||||
|
<span class="text-label-md font-label-md text-on-surface-variant uppercase tracking-wider">버전 히스토리</span>
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant scale-75">history</span>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-stack-sm">
|
||||||
|
<div class="p-stack-sm bg-surface-container-lowest border-l-4 border-primary rounded-lg shadow-sm">
|
||||||
|
<div class="text-label-md font-bold text-primary">v3 (현재 편집 중)</div>
|
||||||
|
<div class="text-label-xs font-label-xs text-on-surface-variant">2026.07.25 · 관리자</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-sm bg-surface-container-low border-l-4 border-green-500 rounded-lg opacity-80">
|
||||||
|
<div class="text-label-md font-semibold text-on-surface">v2 (게시 중)</div>
|
||||||
|
<div class="text-label-xs font-label-xs text-on-surface-variant">2026.06.10 · 시스템</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-sm bg-surface-container-low border-l-4 border-outline-variant rounded-lg opacity-60">
|
||||||
|
<div class="text-label-md font-semibold text-on-surface">v1</div>
|
||||||
|
<div class="text-label-xs font-label-xs text-on-surface-variant">2026.05.15 · 관리자</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-stack-lg p-stack-md bg-primary/5 border border-primary/20 rounded-lg">
|
||||||
|
<div class="flex items-center gap-stack-sm mb-base">
|
||||||
|
<span class="material-symbols-outlined text-primary scale-75" style="font-variation-settings: 'FILL' 1;">event_available</span>
|
||||||
|
<span class="text-label-md font-bold text-primary">예약 정보</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface">
|
||||||
|
2026.08.01 09:00 자동 게시 예약됨
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-auto pt-stack-md border-t border-outline-variant">
|
||||||
|
<div class="flex items-center justify-between group cursor-pointer py-2">
|
||||||
|
<span class="text-label-md font-label-md text-on-surface">현장 사이니지 동시 배포</span>
|
||||||
|
<div class="w-10 h-6 bg-primary rounded-full relative p-1 transition-colors">
|
||||||
|
<div class="w-4 h-4 bg-white rounded-full absolute right-1 shadow-sm"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between group cursor-pointer py-2">
|
||||||
|
<span class="text-label-md font-label-md text-on-surface">메일링 리스트 통보</span>
|
||||||
|
<div class="w-10 h-6 bg-outline-variant rounded-full relative p-1 transition-colors">
|
||||||
|
<div class="w-4 h-4 bg-white rounded-full absolute left-1 shadow-sm"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<!-- Micro-interaction Script -->
|
||||||
|
<script>
|
||||||
|
document.querySelectorAll('button, a').forEach(el => {
|
||||||
|
el.addEventListener('click', (e) => {
|
||||||
|
const ripple = document.createElement('div');
|
||||||
|
ripple.classList.add('absolute', 'bg-white/20', 'rounded-full', 'animate-ping');
|
||||||
|
ripple.style.width = '20px';
|
||||||
|
ripple.style.height = '20px';
|
||||||
|
ripple.style.left = `${e.clientX}px`;
|
||||||
|
ripple.style.top = `${e.clientY}px`;
|
||||||
|
// Add logic for button feedback if needed
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,437 @@
|
|||||||
|
<!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 AI System - 마이크로사이트 빌더</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@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"/>
|
||||||
|
<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": {
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"outline": "#727781",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"primary": "#003765",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-error": "#ffffff"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"base": "4px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"stack-sm": "8px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"label-md": ["Geist"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"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;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: #c1c7d3;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.canvas-bg {
|
||||||
|
background-image: radial-gradient(#c1c7d3 0.5px, transparent 0.5px);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
}
|
||||||
|
.glass-effect {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-surface font-body-base antialiased overflow-hidden">
|
||||||
|
<!-- TopAppBar Shell -->
|
||||||
|
<header class="bg-surface-container-lowest border-b border-outline-variant shadow-sm fixed top-0 z-50 flex justify-between items-center w-full px-6 h-16">
|
||||||
|
<div class="flex items-center gap-8">
|
||||||
|
<h1 class="font-display-lg text-display-lg font-bold text-primary">KINTEX AI System</h1>
|
||||||
|
<nav class="hidden md:flex items-center gap-6">
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-label-md text-label-md" href="#">대시보드</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-label-md text-label-md" href="#">참가업체 관리</a>
|
||||||
|
<a class="text-primary border-b-2 border-primary font-bold pb-1 font-label-md text-label-md" href="#">마이크로사이트 빌더</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-label-md text-label-md" href="#">데이터 분석</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button class="px-4 py-2 border border-outline-variant rounded-full text-on-surface font-label-md text-label-md hover:bg-surface-container-low transition-all">미리보기</button>
|
||||||
|
<button class="px-4 py-2 bg-primary text-on-primary rounded-full font-label-md text-label-md shadow-sm hover:opacity-90 transition-all">배포하기</button>
|
||||||
|
<div class="flex items-center gap-2 ml-4">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer p-2 hover:bg-surface-container rounded-full">notifications</span>
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer p-2 hover:bg-surface-container rounded-full">account_circle</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="flex h-screen pt-16">
|
||||||
|
<!-- Left Panel: Section Editor -->
|
||||||
|
<aside class="w-72 bg-surface-container-low border-r border-outline-variant flex flex-col h-full overflow-y-auto custom-scrollbar">
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<div class="w-10 h-10 bg-primary-container rounded-xl flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-on-primary-container">auto_awesome</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="font-title-sm text-title-sm text-primary">사이트 빌더</h2>
|
||||||
|
<p class="text-xs text-on-surface-variant">(주)한빛로보틱스</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2 mb-8">
|
||||||
|
<div class="text-xs font-bold text-outline mb-3 uppercase tracking-wider">섹션 편집</div>
|
||||||
|
<!-- Section Items -->
|
||||||
|
<div class="bg-primary-container text-on-primary-container rounded-xl p-3 flex items-center justify-between group cursor-pointer shadow-sm">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-sm">drag_indicator</span>
|
||||||
|
<span class="font-label-md text-label-md">부스 소개</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-sm">visibility</span>
|
||||||
|
<span class="material-symbols-outlined text-sm">edit</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-on-surface-variant hover:bg-surface-container-high rounded-xl p-3 flex items-center justify-between group cursor-pointer transition-all">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-sm">drag_indicator</span>
|
||||||
|
<span class="font-label-md text-label-md">제품</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<span class="material-symbols-outlined text-sm">visibility</span>
|
||||||
|
<span class="material-symbols-outlined text-sm">edit</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-on-surface-variant hover:bg-surface-container-high rounded-xl p-3 flex items-center justify-between group cursor-pointer transition-all">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-sm">drag_indicator</span>
|
||||||
|
<span class="font-label-md text-label-md">예상샷 갤러리</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<span class="material-symbols-outlined text-sm">visibility</span>
|
||||||
|
<span class="material-symbols-outlined text-sm">edit</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-on-surface-variant hover:bg-surface-container-high rounded-xl p-3 flex items-center justify-between group cursor-pointer transition-all">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-sm">drag_indicator</span>
|
||||||
|
<span class="font-label-md text-label-md">연락처</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<span class="material-symbols-outlined text-sm">visibility</span>
|
||||||
|
<span class="material-symbols-outlined text-sm">edit</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="w-full mt-4 flex items-center justify-center gap-2 py-3 border-2 border-dashed border-outline-variant rounded-xl text-on-surface-variant hover:bg-surface-container-high transition-all text-sm font-medium">
|
||||||
|
<span class="material-symbols-outlined text-sm">add</span> 섹션 추가
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="text-xs font-bold text-outline mb-1 uppercase tracking-wider">테마 설정</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-xs text-on-surface-variant mb-2">기본 색상</p>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary border-2 border-white ring-2 ring-primary ring-offset-1 cursor-pointer"></div>
|
||||||
|
<div class="w-8 h-8 rounded-full bg-secondary cursor-pointer hover:scale-110 transition-transform"></div>
|
||||||
|
<div class="w-8 h-8 rounded-full bg-[#10B981] cursor-pointer hover:scale-110 transition-transform"></div>
|
||||||
|
<div class="w-8 h-8 rounded-full bg-[#EF4444] cursor-pointer hover:scale-110 transition-transform"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-xs text-on-surface-variant mb-2">폰트 패밀리</p>
|
||||||
|
<div class="relative">
|
||||||
|
<select class="w-full appearance-none bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-primary outline-none">
|
||||||
|
<option>Inter (Corporate)</option>
|
||||||
|
<option>Geist (Modern Mono)</option>
|
||||||
|
<option>Noto Sans KR</option>
|
||||||
|
</select>
|
||||||
|
<span class="material-symbols-outlined absolute right-2 top-2 text-sm pointer-events-none">expand_more</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-auto p-6 border-t border-outline-variant">
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<button class="flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary flex-1">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span class="text-[10px] font-bold">설정</span>
|
||||||
|
</button>
|
||||||
|
<button class="flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary flex-1">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
<span class="text-[10px] font-bold">도움말</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Center: Canvas -->
|
||||||
|
<main class="flex-1 bg-surface-container-low canvas-bg overflow-y-auto p-12 custom-scrollbar">
|
||||||
|
<div class="max-w-4xl mx-auto flex flex-col gap-6">
|
||||||
|
<!-- Canvas Toolbar -->
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<div class="bg-surface-container-lowest shadow-sm rounded-full p-1 flex items-center border border-outline-variant">
|
||||||
|
<button class="px-6 py-2 bg-primary text-on-primary rounded-full flex items-center gap-2 text-sm font-medium transition-all">
|
||||||
|
<span class="material-symbols-outlined text-sm">desktop_windows</span> 데스크톱
|
||||||
|
</button>
|
||||||
|
<button class="px-6 py-2 text-on-surface-variant hover:bg-surface-container-low rounded-full flex items-center gap-2 text-sm font-medium transition-all">
|
||||||
|
<span class="material-symbols-outlined text-sm">smartphone</span> 모바일
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Preview Container -->
|
||||||
|
<div class="bg-white rounded-2xl shadow-xl overflow-hidden min-h-[1200px] border border-outline-variant">
|
||||||
|
<!-- Microsite Header -->
|
||||||
|
<div class="h-16 flex items-center justify-between px-8 border-b border-surface-container">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white font-bold italic">H</div>
|
||||||
|
<span class="font-bold text-primary">(주)한빛로보틱스</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-6 text-sm font-medium text-on-surface-variant">
|
||||||
|
<span>소개</span>
|
||||||
|
<span>제품</span>
|
||||||
|
<span>갤러리</span>
|
||||||
|
<span class="text-primary">문의하기</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Hero Banner Section -->
|
||||||
|
<section class="relative h-[480px] flex items-center overflow-hidden">
|
||||||
|
<div class="absolute inset-0 z-0">
|
||||||
|
<div class="w-full h-full bg-cover bg-center transition-transform duration-700 hover:scale-105" data-alt="A grand, hyper-realistic scale model or wide-angle shot of a futuristic robotics exhibition booth at KINTEX. The booth, belonging to Hanbit Robotics, features a sleek curved canopy with glowing cyan light strips, large high-definition screens displaying robotic arms in motion, and a clean white floor with minimalist product pedestals. The atmosphere is sophisticated and professional with a cool blue and silver color palette." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA7uBjYLKpPaMKGi8aFWL_OEefz3AabfH0XIMUK6HNI31wfUJwDrCshSuIXlOsuJQMsyGSSiXLrDcajMJmELEe9uGZOjSvw71s-enc4OQh3wtZJCrHD9jT3PnB5Y5IAHJbCFmfHisw4qd7yp7SBU9kUXUn1CJcJp9umXfGoWRBf1diGgwyCnRdKx72leksFRVUmugrE0cFspap2-4F6y7_haPUG1R5B05sbBugseADBFI0mSMcU2UxAgssfbQwpq_a3cEO2wV2neqo')"></div>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-r from-primary/90 to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
<div class="relative z-10 px-12 max-w-2xl text-white">
|
||||||
|
<div class="inline-block px-3 py-1 bg-white/10 backdrop-blur-md border border-white/20 rounded-full text-xs font-bold mb-4">KINTEX AI EXPO 2024</div>
|
||||||
|
<h1 class="text-5xl font-bold mb-6 leading-tight">지능형 로보틱스의<br/>새로운 지평을 열다</h1>
|
||||||
|
<p class="text-lg text-white/80 mb-8 font-light">산업용 로봇부터 서비스 자동화 솔루션까지, 한빛로보틱스가 제시하는 미래 모빌리티 생태계를 경험하세요.</p>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<button class="px-8 py-3 bg-white text-primary rounded-lg font-bold shadow-lg hover:bg-surface-container-low transition-all">미팅 예약하기</button>
|
||||||
|
<button class="px-8 py-3 border border-white/30 backdrop-blur-sm text-white rounded-lg font-bold hover:bg-white/10 transition-all">브로슈어 다운로드</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Product Grid Section -->
|
||||||
|
<section class="p-12 bg-surface-bright">
|
||||||
|
<div class="flex items-center justify-between mb-8">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-1 h-6 bg-primary rounded-full"></div>
|
||||||
|
<h2 class="text-2xl font-bold text-on-surface">주요 혁신 제품</h2>
|
||||||
|
</div>
|
||||||
|
<button class="text-primary font-bold text-sm flex items-center">전체 보기 <span class="material-symbols-outlined text-sm">chevron_right</span></button>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-8">
|
||||||
|
<!-- Card 1 -->
|
||||||
|
<div class="group bg-white rounded-2xl border border-outline-variant overflow-hidden hover:shadow-lg transition-all duration-300">
|
||||||
|
<div class="h-48 relative overflow-hidden">
|
||||||
|
<div class="w-full h-full bg-cover bg-center group-hover:scale-110 transition-transform duration-500" data-alt="Close-up of a sophisticated industrial robotic arm painted in matte white with carbon fiber accents, performing precision assembly in a clean, brightly lit manufacturing environment. The lighting is crisp and cool, highlighting the metallic textures and fluid mechanical joints of the robot. The overall aesthetic is ultra-modern and corporate." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAJslcK6oCfsi8JeVmhJD8pAD8VJsDuDNGXgEe9hx-3nCmIygyucB3eto1yTsV12uMpQaH4XbNJ4s5JQIXyP_EHbq_iQVxFfqOQi-9HiK9NGumm7-nhecJtMYSbQiTr297BvruBRVtiaR9I_fcHXpVH7Vcx2fJpUP7kE2zgvyZAugX0eUMoodMCVuIZwrID9nHtFhzvQyJ30IOh6PJiHdT6GxMbQx_CUV0y1JRyNnn6WbfF5kQGmV9LysXIuD04BjwGydCYC8lYBbo')"></div>
|
||||||
|
<div class="absolute top-4 right-4 px-3 py-1 bg-primary text-white text-xs font-bold rounded-full">NEW</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 border-l-4 border-primary">
|
||||||
|
<h3 class="text-lg font-bold mb-2">HR-A1 협동로봇</h3>
|
||||||
|
<p class="text-sm text-on-surface-variant mb-4">고정밀 센서와 AI 비전 시스템이 탑재된 다목적 협동로봇으로 안전한 협업 환경을 제공합니다.</p>
|
||||||
|
<button class="w-full py-2 bg-surface-container-low text-primary font-bold rounded-lg group-hover:bg-primary group-hover:text-white transition-colors">상세 사양 보기</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 2 -->
|
||||||
|
<div class="group bg-white rounded-2xl border border-outline-variant overflow-hidden hover:shadow-lg transition-all duration-300">
|
||||||
|
<div class="h-48 relative overflow-hidden">
|
||||||
|
<div class="w-full h-full bg-cover bg-center group-hover:scale-110 transition-transform duration-500" data-alt="A futuristic service robot with a friendly digital face interface, standing in a brightly lit corporate lounge area. The robot has a sleek minimalist white body with subtle blue LED glowing elements. In the background, blurred modern furniture and green plants enhance the high-end, futuristic hospitality vibe. Soft, natural light fills the space." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAs30mIWmJRFomTta5Difa0J0K_fzdDsPyn_WaHGcD2YQZ3RnZs9e0rhKQbB3TAKVddk42AtU6Asri1JxDiCCpKwKTbYpzqSVvSwXks7jg5sYL1UXhr8eKAjXxGG9PvyZIUFfDlwAhLITV6QKE9eZZmM_Gpiu8eI49ICVFCqKUdeHH9FG3DOg7wNmUstZBSebWdndX-4IRqOBYUT9IFKFwQu1cWnsNnejyng9RKk9r_6SQU8cCcyaYDbMrCvV7eI11L8X0kpCfn4Z4')"></div>
|
||||||
|
<div class="absolute top-4 right-4 px-3 py-1 bg-secondary text-white text-xs font-bold rounded-full">POPULAR</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 border-l-4 border-secondary">
|
||||||
|
<h3 class="text-lg font-bold mb-2">ServiBot Elite</h3>
|
||||||
|
<p class="text-sm text-on-surface-variant mb-4">전시장 및 호텔용 지능형 서비스 로봇으로 다국어 응대 및 자율 주행 안내가 가능합니다.</p>
|
||||||
|
<button class="w-full py-2 bg-surface-container-low text-secondary font-bold rounded-lg group-hover:bg-secondary group-hover:text-white transition-colors">상세 사양 보기</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- AI Gallery Section -->
|
||||||
|
<section class="p-12 bg-white">
|
||||||
|
<div class="flex items-center gap-2 mb-8">
|
||||||
|
<div class="w-1 h-6 bg-tertiary-container rounded-full"></div>
|
||||||
|
<h2 class="text-2xl font-bold text-on-surface">AI 부스 예상 시뮬레이션</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="relative group rounded-xl overflow-hidden aspect-[4/3] border border-outline-variant">
|
||||||
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida/AP1WRLv3H3Wpe0zBHSuxQpTcXDcpOdolguqYeCc-O6Er1f1v7kIW1OvM8jO7ML3Duw169HILHRn6lMMYiX7cmJr_Ym05mrjgXagaQQtoAwQ3TIC3ZyZ7Bg-e42UBTkKt_wIydOFlskhmY6h5XTNmXwnDqY17JnXhXpY9NLdpPzY080hy03Mi5oNj1b3jZGV5WGcflIMxg6M49tHGG6P0pJY7mBYNrf9Lbn9jeoGeFbtHqCltSbrfa0LqRPTzk68"/>
|
||||||
|
<div class="absolute bottom-2 right-2 text-[10px] text-white/50 bg-black/20 px-2 rounded backdrop-blur-sm">AI 생성 예상 이미지</div>
|
||||||
|
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-white text-3xl">zoom_in</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="relative group rounded-xl overflow-hidden aspect-[4/3] border border-outline-variant">
|
||||||
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida/AP1WRLvwgkiVy1bWjfMXTV1VcvcnbYRvB-US3OXaAPSL0Ygxv_wQgZIrq2LFFc6zFDQ4FBQEcagABYU-UNLHF3hZdikrom4ENpN563lI3gXSJgCvxknOhpcHhpO7dUktv5Wg-hEaNzVHNfG2_CxgXFtXxyg4BWlNciTRF_lzeYqEBDJuhUSOCmY2HG2o3e7DWbX4BnpnvDEzVX9pXL-Go3w2mFFA257GsBvLwm_DXFRNjSm_m0JNeKL_qCXcPog"/>
|
||||||
|
<div class="absolute bottom-2 right-2 text-[10px] text-white/50 bg-black/20 px-2 rounded backdrop-blur-sm">AI 생성 예상 이미지</div>
|
||||||
|
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-white text-3xl">zoom_in</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Right Panel: Publishing & SEO -->
|
||||||
|
<aside class="w-72 bg-surface-container-lowest border-l border-outline-variant flex flex-col h-full overflow-y-auto custom-scrollbar">
|
||||||
|
<div class="p-6 space-y-8">
|
||||||
|
<!-- Status & URL -->
|
||||||
|
<section>
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<span class="text-xs font-bold text-outline uppercase tracking-wider">사이트 상태</span>
|
||||||
|
<div class="flex items-center gap-1.5 px-2.5 py-1 bg-on-tertiary-container/10 text-on-tertiary-fixed-variant rounded-full text-[10px] font-bold">
|
||||||
|
<span class="w-1.5 h-1.5 bg-[#10B981] rounded-full animate-pulse"></span> 게시됨
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="text-[11px] font-bold text-on-surface-variant">도메인 URL</label>
|
||||||
|
<div class="flex items-center gap-2 bg-surface-container-low p-2 rounded-lg border border-outline-variant">
|
||||||
|
<span class="text-xs text-primary truncate flex-1 font-medium">hanbit.expo.kintex.kr</span>
|
||||||
|
<button class="material-symbols-outlined text-sm hover:text-primary transition-colors">content_copy</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- SEO Settings -->
|
||||||
|
<section class="space-y-4">
|
||||||
|
<span class="text-xs font-bold text-outline uppercase tracking-wider block">SEO 및 검색 엔진</span>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="text-[11px] font-bold text-on-surface-variant">페이지 타이틀</label>
|
||||||
|
<input class="w-full bg-white border border-outline-variant rounded-lg px-3 py-2 text-sm focus:ring-1 focus:ring-primary focus:border-primary outline-none" type="text" value="한빛로보틱스 | KINTEX AI 전시"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="text-[11px] font-bold text-on-surface-variant">메타 설명</label>
|
||||||
|
<textarea class="w-full bg-white border border-outline-variant rounded-lg px-3 py-2 text-sm h-24 resize-none focus:ring-1 focus:ring-primary focus:border-primary outline-none">KINTEX AI EXPO 2024 (주)한빛로보틱스 공식 마이크로사이트입니다. 최첨단 협동로봇과 서비스 로봇 솔루션을 만나보세요.</textarea>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Language Selection -->
|
||||||
|
<section class="space-y-3">
|
||||||
|
<span class="text-xs font-bold text-outline uppercase tracking-wider block">언어 설정</span>
|
||||||
|
<div class="flex bg-surface-container-low rounded-lg p-1 border border-outline-variant">
|
||||||
|
<button class="flex-1 py-1.5 text-xs font-bold bg-white text-primary shadow-sm rounded-md transition-all">한</button>
|
||||||
|
<button class="flex-1 py-1.5 text-xs font-medium text-on-surface-variant hover:text-primary transition-all">영</button>
|
||||||
|
<button class="flex-1 py-1.5 text-xs font-medium text-on-surface-variant hover:text-primary transition-all">중</button>
|
||||||
|
<button class="flex-1 py-1.5 text-xs font-medium text-on-surface-variant hover:text-primary transition-all">일</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Activity Feed -->
|
||||||
|
<section class="pt-4 border-t border-outline-variant">
|
||||||
|
<div class="flex items-center gap-2 mb-4 text-primary">
|
||||||
|
<span class="material-symbols-outlined text-sm">history</span>
|
||||||
|
<span class="text-xs font-bold">최근 작업 이력</span>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-primary mt-1.5"></div>
|
||||||
|
<div>
|
||||||
|
<p class="text-xs font-bold text-on-surface">갤러리 이미지 업데이트</p>
|
||||||
|
<p class="text-[10px] text-outline">10분 전 · 관리자</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-outline-variant mt-1.5"></div>
|
||||||
|
<div>
|
||||||
|
<p class="text-xs text-on-surface-variant">SEO 메타 데이터 수정</p>
|
||||||
|
<p class="text-[10px] text-outline">2시간 전 · 관리자</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<!-- Footer Action -->
|
||||||
|
<div class="mt-auto p-6 bg-surface-container-lowest border-t border-outline-variant">
|
||||||
|
<button class="w-full py-3 bg-primary text-on-primary rounded-xl font-bold text-sm shadow-md hover:scale-[0.98] transition-transform">
|
||||||
|
전시 라이브 적용
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
<!-- Floating Action for Canvas Info -->
|
||||||
|
<div class="fixed bottom-8 left-1/2 -translate-x-1/2 glass-effect border border-outline-variant/30 px-4 py-2 rounded-full shadow-lg flex items-center gap-4 z-40">
|
||||||
|
<div class="flex -space-x-2">
|
||||||
|
<div class="w-6 h-6 rounded-full border-2 border-white bg-blue-500"></div>
|
||||||
|
<div class="w-6 h-6 rounded-full border-2 border-white bg-purple-500"></div>
|
||||||
|
<div class="w-6 h-6 rounded-full border-2 border-white bg-gray-200 flex items-center justify-center text-[10px] font-bold">+2</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-4 w-[1px] bg-outline-variant"></div>
|
||||||
|
<p class="text-xs font-medium text-on-surface">현재 3명의 사용자가 이 프로젝트를 수정 중입니다.</p>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
// Simple micro-interaction for active states
|
||||||
|
document.querySelectorAll('aside nav a, aside .space-y-2 div').forEach(item => {
|
||||||
|
item.addEventListener('click', function() {
|
||||||
|
// This would handle real switching in a full app
|
||||||
|
console.log('Switching context to:', this.innerText.trim());
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,414 @@
|
|||||||
|
<!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 AI - SCR-37 다국어 콘텐츠 관리</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;900&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"/>
|
||||||
|
<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": {
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"primary": "#003765",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"outline": "#727781",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"container-padding": "24px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"stack-sm": "8px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"display-lg-mobile": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"display-lg": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body { font-family: 'Inter', sans-serif; }
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: #c1c7d3;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
.translation-row:hover {
|
||||||
|
background-color: #f2f3ff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-surface">
|
||||||
|
<!-- Side Navigation Shell -->
|
||||||
|
<nav class="bg-surface-container dark:bg-inverse-surface h-full w-64 fixed left-0 top-0 border-r border-outline-variant flex flex-col py-stack-lg px-gutter z-50">
|
||||||
|
<div class="mb-12">
|
||||||
|
<h1 class="font-display-lg text-display-lg font-black text-primary dark:text-primary-fixed">KINTEX AI</h1>
|
||||||
|
<p class="font-title-sm text-label-md text-on-surface-variant opacity-70">Exhibition Management</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2 flex-1">
|
||||||
|
<div class="text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-colors p-3 rounded-xl flex items-center gap-3 cursor-pointer">
|
||||||
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||||
|
<span class="font-title-sm text-body-base">Dashboard</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-primary-container text-on-primary-container font-bold rounded-xl p-3 flex items-center gap-3 cursor-pointer">
|
||||||
|
<span class="material-symbols-outlined" data-icon="event">event</span>
|
||||||
|
<span class="font-title-sm text-body-base">Exhibitions</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-colors p-3 rounded-xl flex items-center gap-3 cursor-pointer">
|
||||||
|
<span class="material-symbols-outlined" data-icon="insights">insights</span>
|
||||||
|
<span class="font-title-sm text-body-base">AI Analytics</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-colors p-3 rounded-xl flex items-center gap-3 cursor-pointer">
|
||||||
|
<span class="material-symbols-outlined" data-icon="handshake">handshake</span>
|
||||||
|
<span class="font-title-sm text-body-base">Partners</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-colors p-3 rounded-xl flex items-center gap-3 cursor-pointer">
|
||||||
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||||
|
<span class="font-title-sm text-body-base">Settings</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pt-6 border-t border-outline-variant space-y-2">
|
||||||
|
<div class="text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-colors p-3 rounded-xl flex items-center gap-3 cursor-pointer">
|
||||||
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||||
|
<span class="font-label-md">Help Center</span>
|
||||||
|
</div>
|
||||||
|
<button class="w-full bg-primary text-on-primary font-bold py-3 rounded-xl transition-all active:scale-95">
|
||||||
|
System Support
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Top AppBar Shell -->
|
||||||
|
<header class="fixed top-0 left-64 right-0 h-16 bg-surface-bright border-b border-outline-variant flex justify-between items-center px-container-padding z-40">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<h2 class="font-headline-md text-headline-md font-bold text-primary">Account Management</h2>
|
||||||
|
<div class="flex gap-6 ml-8">
|
||||||
|
<a class="text-on-surface-variant hover:text-primary font-label-md" href="#">Profile</a>
|
||||||
|
<a class="text-primary border-b-2 border-primary pb-1 font-label-md" href="#">Security</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary font-label-md" href="#">Preferences</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary font-label-md" href="#">Billing</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="relative">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]" data-icon="search">search</span>
|
||||||
|
<input class="pl-10 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-full text-body-sm focus:ring-2 focus:ring-primary outline-none w-64" placeholder="Search resources..." type="text"/>
|
||||||
|
</div>
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-all opacity-80 hover:opacity-100" data-icon="notifications">notifications</span>
|
||||||
|
<img class="w-8 h-8 rounded-full border border-outline" data-alt="Professional studio portrait of a corporate administrator, high-end photography, clean blue lighting, office background blurred, ultra-detailed skin textures, professional attire, KINTEX executive profile photo style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBv7DMFbaqNrWXRwTQaT7B8H4Od5WlHgwSGgirOPt-zVPWdzIKbLCIf357IQMZG_XD3tWwcP9Yl-TFYUmH2wWN26Mx0w-cAfP3ZBRPQ_-QxZRwwyEv5fKddLYe2zJIaIUYlZ5zHnM6PPF6l6CYPwYK5RrCWVlCmU3rLqFmSRDzg-Jem8F6VEx1fAmtG7Uh8MpJrRLok4jwroiAtapD3n2LC0e2MbfJ5aspuXkYbIR_BPX95jr-cFoDQ5s6Q8uYSMddXny42w_hpSP4"/>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Content Canvas -->
|
||||||
|
<main class="ml-64 mt-16 p-stack-lg min-h-screen">
|
||||||
|
<!-- Summary Bar: Language Coverage -->
|
||||||
|
<div class="grid grid-cols-4 gap-gutter mb-stack-lg">
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-4 shadow-sm border-l-4 border-primary">
|
||||||
|
<div class="flex justify-between items-center mb-2">
|
||||||
|
<span class="text-label-md font-bold text-on-surface">한국어 (KO)</span>
|
||||||
|
<span class="text-label-md font-bold text-primary">100%</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-surface-container h-2 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-primary h-full w-[100%] transition-all duration-1000"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-4 shadow-sm border-l-4 border-secondary">
|
||||||
|
<div class="flex justify-between items-center mb-2">
|
||||||
|
<span class="text-label-md font-bold text-on-surface">English (EN)</span>
|
||||||
|
<span class="text-label-md font-bold text-secondary">82%</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-surface-container h-2 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-secondary h-full w-[82%] transition-all duration-1000 delay-100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-4 shadow-sm border-l-4 border-tertiary">
|
||||||
|
<div class="flex justify-between items-center mb-2">
|
||||||
|
<span class="text-label-md font-bold text-on-surface">Chinese (ZH)</span>
|
||||||
|
<span class="text-label-md font-bold text-tertiary">60%</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-surface-container h-2 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-tertiary h-full w-[60%] transition-all duration-1000 delay-200"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-4 shadow-sm border-l-4 border-on-surface-variant">
|
||||||
|
<div class="flex justify-between items-center mb-2">
|
||||||
|
<span class="text-label-md font-bold text-on-surface">Japanese (JA)</span>
|
||||||
|
<span class="text-label-md font-bold text-on-surface-variant">45%</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-surface-container h-2 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-on-surface-variant h-full w-[45%] transition-all duration-1000 delay-300"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-gutter h-[calc(100vh-280px)]">
|
||||||
|
<!-- Left: Translation Matrix -->
|
||||||
|
<div class="flex-1 bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden flex flex-col">
|
||||||
|
<!-- Toolbar -->
|
||||||
|
<div class="p-4 border-b border-outline-variant flex justify-between items-center">
|
||||||
|
<div class="flex gap-2 p-1 bg-surface-container rounded-lg">
|
||||||
|
<button class="px-4 py-1.5 rounded-md bg-white shadow-sm text-label-md font-bold text-primary">English (EN)</button>
|
||||||
|
<button class="px-4 py-1.5 rounded-md hover:bg-white/50 text-label-md font-medium text-on-surface-variant">Chinese (ZH)</button>
|
||||||
|
<button class="px-4 py-1.5 rounded-md hover:bg-white/50 text-label-md font-medium text-on-surface-variant">Japanese (JA)</button>
|
||||||
|
</div>
|
||||||
|
<button class="bg-secondary-container text-on-secondary px-4 py-2 rounded-full font-label-md flex items-center gap-2 hover:brightness-110 transition-all active:scale-95">
|
||||||
|
<span class="material-symbols-outlined text-[18px]" data-icon="auto_awesome" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
AI 자동 번역
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Matrix Table -->
|
||||||
|
<div class="flex-1 overflow-auto custom-scrollbar">
|
||||||
|
<table class="w-full text-left border-collapse">
|
||||||
|
<thead class="sticky top-0 bg-surface-container-low z-10">
|
||||||
|
<tr>
|
||||||
|
<th class="p-4 font-label-md text-on-surface-variant border-b border-outline-variant w-1/4">콘텐츠 ID / 원문 (KO)</th>
|
||||||
|
<th class="p-4 font-label-md text-on-surface-variant border-b border-outline-variant w-1/3">번역본 (Target)</th>
|
||||||
|
<th class="p-4 font-label-md text-on-surface-variant border-b border-outline-variant text-center">상태</th>
|
||||||
|
<th class="p-4 font-label-md text-on-surface-variant border-b border-outline-variant text-right">최근 업데이트</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="text-body-sm text-on-surface divide-y divide-outline-variant">
|
||||||
|
<tr class="translation-row cursor-pointer transition-colors bg-primary-fixed/5">
|
||||||
|
<td class="p-4">
|
||||||
|
<div class="font-bold">행사명</div>
|
||||||
|
<div class="text-on-surface-variant text-[11px]">GLOBAL_EVENT_NAME</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 italic">KINTEX Global Smart Tech Expo 2024</td>
|
||||||
|
<td class="p-4 text-center">
|
||||||
|
<span class="bg-on-tertiary-container/20 text-on-tertiary-fixed-variant px-3 py-1 rounded-full text-[11px] font-bold">검수완료</span>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-right text-on-surface-variant">2시간 전</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="translation-row cursor-pointer transition-colors">
|
||||||
|
<td class="p-4">
|
||||||
|
<div class="font-bold">홀 안내</div>
|
||||||
|
<div class="text-on-surface-variant text-[11px]">HALL_GUIDE</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-4">Exhibition Hall Floor Information</td>
|
||||||
|
<td class="p-4 text-center">
|
||||||
|
<span class="bg-secondary-fixed text-on-secondary-fixed-variant px-3 py-1 rounded-full text-[11px] font-bold">AI 초벌</span>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-right text-on-surface-variant">1일 전</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="translation-row cursor-pointer transition-colors">
|
||||||
|
<td class="p-4">
|
||||||
|
<div class="font-bold">참가 신청</div>
|
||||||
|
<div class="text-on-surface-variant text-[11px]">REGISTRATION</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-on-surface-variant opacity-50">Pending translation...</td>
|
||||||
|
<td class="p-4 text-center">
|
||||||
|
<span class="bg-surface-container-high text-on-surface-variant px-3 py-1 rounded-full text-[11px] font-bold">미번역</span>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-right text-on-surface-variant">-</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="translation-row cursor-pointer transition-colors">
|
||||||
|
<td class="p-4">
|
||||||
|
<div class="font-bold">전시 개요</div>
|
||||||
|
<div class="text-on-surface-variant text-[11px]">EXHIBITION_OVERVIEW</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-4">Overview of the upcoming tech showcase and participation guidelines.</td>
|
||||||
|
<td class="p-4 text-center">
|
||||||
|
<span class="bg-secondary-fixed text-on-secondary-fixed-variant px-3 py-1 rounded-full text-[11px] font-bold">AI 초벌</span>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-right text-on-surface-variant">3시간 전</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="translation-row cursor-pointer transition-colors">
|
||||||
|
<td class="p-4">
|
||||||
|
<div class="font-bold">전시장 안내도</div>
|
||||||
|
<div class="text-on-surface-variant text-[11px]">FLOOR_MAP_ALT</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-4">Detailed layout and booth mapping for KINTEX 1 and 2.</td>
|
||||||
|
<td class="p-4 text-center">
|
||||||
|
<span class="bg-on-tertiary-container/20 text-on-tertiary-fixed-variant px-3 py-1 rounded-full text-[11px] font-bold">검수완료</span>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-right text-on-surface-variant">5일 전</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Right Side Panel: Editor -->
|
||||||
|
<div class="w-80 flex flex-col gap-gutter">
|
||||||
|
<!-- Editor Section -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl flex-1 flex flex-col overflow-hidden">
|
||||||
|
<div class="p-4 border-b border-outline-variant bg-surface-container-low flex justify-between items-center">
|
||||||
|
<span class="font-bold text-label-md">번역 편집: 원문(한) ↔ 번역(영)</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px] text-on-surface-variant" data-icon="close">close</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 space-y-4 flex-1 overflow-auto custom-scrollbar">
|
||||||
|
<div>
|
||||||
|
<label class="text-label-xs text-on-surface-variant uppercase mb-1 block">Selected ID</label>
|
||||||
|
<div class="text-body-sm font-bold text-primary">GLOBAL_EVENT_NAME</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="text-label-xs text-on-surface-variant uppercase mb-1 block">원문 (KO)</label>
|
||||||
|
<div class="p-3 bg-surface-container-low rounded-lg border border-outline-variant text-body-sm font-medium">
|
||||||
|
행사명
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="text-label-xs text-on-surface-variant uppercase mb-1 block">번역 (EN)</label>
|
||||||
|
<textarea class="w-full h-24 p-3 bg-white rounded-lg border-2 border-secondary outline-none text-body-sm focus:ring-0 resize-none">KINTEX Global Smart Tech Expo 2024</textarea>
|
||||||
|
<div class="flex justify-end gap-2 mt-2">
|
||||||
|
<button class="text-secondary text-label-xs font-bold flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" data-icon="sync" style="font-variation-settings: 'FILL' 1;">sync</span>
|
||||||
|
AI 재생성
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr class="border-outline-variant"/>
|
||||||
|
<!-- Glossary Section -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2 mb-2">
|
||||||
|
<span class="material-symbols-outlined text-[16px] text-primary" data-icon="book" style="font-variation-settings: 'FILL' 1;">book</span>
|
||||||
|
<span class="text-label-md font-bold">Glossary</span>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="flex justify-between items-center p-2 bg-surface-container-low rounded-md border border-outline-variant">
|
||||||
|
<span class="text-label-xs font-bold">홀</span>
|
||||||
|
<span class="text-label-xs text-on-surface-variant">→ Hall</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center p-2 bg-surface-container-low rounded-md border border-outline-variant">
|
||||||
|
<span class="text-label-xs font-bold">안내</span>
|
||||||
|
<span class="text-label-xs text-on-surface-variant">→ Guide</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Tone Guide Section -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2 mb-2">
|
||||||
|
<span class="material-symbols-outlined text-[16px] text-secondary" data-icon="psychology" style="font-variation-settings: 'FILL' 1;">psychology</span>
|
||||||
|
<span class="text-label-md font-bold">Tone Guide</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 bg-secondary-fixed/30 border border-secondary-container rounded-lg">
|
||||||
|
<div class="text-[11px] font-bold text-on-secondary-fixed-variant mb-1">비즈니스 격식체 (Formal Business)</div>
|
||||||
|
<p class="text-[11px] text-on-secondary-fixed leading-relaxed italic">
|
||||||
|
"AI 추천: 공식 웹사이트 제목에는 불필요한 관사를 생략하고 핵심 키워드 중심의 명사형 종결이 효과적입니다."
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 border-t border-outline-variant bg-surface-container-low grid grid-cols-2 gap-2">
|
||||||
|
<button class="py-2 border border-outline-variant bg-white rounded-lg font-bold text-label-md hover:bg-surface-container transition-all">취소</button>
|
||||||
|
<button class="py-2 bg-primary text-on-primary rounded-lg font-bold text-label-md hover:brightness-125 shadow-md transition-all active:scale-95">적용</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Footer Shell -->
|
||||||
|
<footer class="ml-64 bg-surface-container-low border-t border-outline-variant flex justify-between items-center py-4 px-container-padding mt-4">
|
||||||
|
<span class="font-label-xs text-on-surface-variant">© 2024 KINTEX AI Exhibition Management. All rights reserved.</span>
|
||||||
|
<div class="flex gap-6">
|
||||||
|
<a class="font-label-xs text-on-surface-variant hover:text-primary hover:underline" href="#">Privacy Policy</a>
|
||||||
|
<a class="font-label-xs text-on-surface-variant hover:text-primary hover:underline" href="#">Terms of Service</a>
|
||||||
|
<a class="font-label-xs text-on-surface-variant hover:text-primary hover:underline" href="#">Security Compliance</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
// Micro-interaction for row selection highlight
|
||||||
|
document.querySelectorAll('.translation-row').forEach(row => {
|
||||||
|
row.addEventListener('click', () => {
|
||||||
|
document.querySelectorAll('.translation-row').forEach(r => r.classList.remove('bg-primary-fixed/10', 'border-l-4', 'border-primary'));
|
||||||
|
row.classList.add('bg-primary-fixed/10', 'border-l-4', 'border-primary');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Simulating some dynamic behavior for AI translation button
|
||||||
|
const aiBtn = document.querySelector('button:contains("AI 자동 번역")');
|
||||||
|
if (aiBtn) {
|
||||||
|
aiBtn.addEventListener('click', function() {
|
||||||
|
this.innerHTML = `<span class="material-symbols-outlined animate-spin text-[18px]" data-icon="autorenew">autorenew</span> 번역 중...`;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.innerHTML = `<span class="material-symbols-outlined text-[18px]" data-icon="auto_awesome" style="font-variation-settings: 'FILL' 1;">auto_awesome</span> AI 자동 번역`;
|
||||||
|
}, 2000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,398 @@
|
|||||||
|
<!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 AI System - 업체 포털</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@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"/>
|
||||||
|
<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": {
|
||||||
|
"outline": "#727781",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"outline-variant": "#c2c7d1",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"primary": "#003765",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"on-error": "#ffffff"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"base": "4px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"gutter": "16px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"display-lg-mobile": ["Inter"],
|
||||||
|
"body-base": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body { font-family: 'Inter', 'Pretendard', sans-serif; background-color: #faf8ff; }
|
||||||
|
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
||||||
|
.glass-effect { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.8); }
|
||||||
|
.sharp-border { border-radius: 4px; }
|
||||||
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="text-on-surface bg-surface-bright">
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="bg-surface-bright dark:bg-inverse-surface border-b border-outline-variant fixed top-0 left-0 right-0 z-50 flex justify-between items-center w-full px-gutter h-16">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<h1 class="font-headline-md text-headline-md text-primary dark:text-primary-fixed-dim tracking-tight">KINTEX AI System</h1>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<div class="hidden md:flex items-center bg-surface-container-low px-4 py-1.5 rounded-full border border-outline-variant">
|
||||||
|
<span class="material-symbols-outlined text-outline text-[20px] mr-2">search</span>
|
||||||
|
<input class="bg-transparent border-none focus:ring-0 text-body-sm w-64 p-0" placeholder="부스 또는 옥션 검색" type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="material-symbols-outlined cursor-pointer text-on-surface-variant hover:text-primary transition-colors">notifications</span>
|
||||||
|
<div class="flex items-center gap-2 cursor-pointer group">
|
||||||
|
<span class="material-symbols-outlined text-[32px] text-primary">account_circle</span>
|
||||||
|
<span class="font-label-md text-label-md text-on-surface-variant group-hover:text-primary">(주)글로벌시공 파트너</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<aside class="fixed left-0 top-0 h-full w-64 bg-surface-container-low dark:bg-surface-container border-r border-outline-variant flex flex-col pt-16 z-40">
|
||||||
|
<div class="px-6 py-8">
|
||||||
|
<div class="flex items-center gap-3 mb-2">
|
||||||
|
<div class="w-10 h-10 bg-white rounded-md flex items-center justify-center border border-outline-variant">
|
||||||
|
<img class="w-8 h-8 object-contain" data-alt="A professional, clean vector logo for KINTEX, featuring bold blue typography on a pristine white background. The style is modern corporate, emphasizing authority and architectural precision for a global exhibition center. Soft high-key lighting illuminates the logo subtly." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC7ZnN3zTDsVtirZkqpeVD5c59LDZCAp9BBqiKDLgxw9QWX9cQcVjXZFpfl-dxawoxJluxCX6Qe5WaoYFsfjk5UsLoI2qIEFICAHdy03JKR9Gb4uvP8gyimaQBpmVmRSwZ45W8IDvmajQyrje5TP1zZyEwb_5fBJpQwfVkION2oklft4E3rTiejqQtbNcOpgnZJGV6Wd_XFyNytN-jmN5_WdPlL4M9pMD6IGhvaoIapCDJ78e2UQmNK3eWvG6ggDgLw_Il6Nc2cXKg"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-title-sm text-title-sm text-primary leading-tight">업체 포털</p>
|
||||||
|
<p class="text-[11px] text-outline uppercase tracking-wider">Construction Mgmt</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 px-3 space-y-1">
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container transition-all" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="font-label-md text-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-primary font-bold border-l-4 border-primary bg-surface-container-high" href="#">
|
||||||
|
<span class="material-symbols-outlined">storefront</span>
|
||||||
|
<span class="font-label-md text-label-md">수주 부스</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container transition-all" href="#">
|
||||||
|
<span class="material-symbols-outlined">gavel</span>
|
||||||
|
<span class="font-label-md text-label-md">옥션 참여</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container transition-all" href="#">
|
||||||
|
<span class="material-symbols-outlined">payments</span>
|
||||||
|
<span class="font-label-md text-label-md">정산 관리</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container transition-all" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span class="font-label-md text-label-md">설정</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="bg-primary-container p-4 rounded-xl">
|
||||||
|
<p class="text-on-primary-container font-label-md mb-2">시공 안전 교육</p>
|
||||||
|
<div class="w-full bg-white/20 h-1 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-white h-full w-[85%]"></div>
|
||||||
|
</div>
|
||||||
|
<p class="text-white/80 text-[10px] mt-2">D-4 교육 갱신 만료</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Main Content Canvas -->
|
||||||
|
<main class="ml-64 pt-16 min-h-screen">
|
||||||
|
<div class="max-w-[1280px] mx-auto px-gutter py-8">
|
||||||
|
<!-- KPI Section -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-8">
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant p-4 sharp-border hover:shadow-md transition-shadow">
|
||||||
|
<p class="text-outline font-label-md mb-1">수주 부스</p>
|
||||||
|
<h3 class="font-display-lg text-display-lg text-primary">8</h3>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant p-4 sharp-border hover:shadow-md transition-shadow">
|
||||||
|
<p class="text-outline font-label-md mb-1">진행 옥션</p>
|
||||||
|
<h3 class="font-display-lg text-display-lg text-on-surface">3</h3>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant p-4 sharp-border hover:shadow-md transition-shadow">
|
||||||
|
<p class="text-outline font-label-md mb-1">응찰 대기</p>
|
||||||
|
<h3 class="font-display-lg text-display-lg text-on-surface">2</h3>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant p-4 sharp-border hover:shadow-md transition-shadow">
|
||||||
|
<p class="text-outline font-label-md mb-1">시공 진행</p>
|
||||||
|
<h3 class="font-display-lg text-display-lg text-on-tertiary-container">5</h3>
|
||||||
|
</div>
|
||||||
|
<div class="bg-error-container border border-error p-4 sharp-border hover:shadow-md transition-shadow">
|
||||||
|
<p class="text-error-red font-label-md mb-1">마감 임박</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h3 class="font-display-lg text-display-lg text-error-red">1</h3>
|
||||||
|
<span class="material-symbols-outlined text-error-red animate-pulse">priority_high</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
|
||||||
|
<!-- Main Left (2/3) - Awarded Booths List -->
|
||||||
|
<div class="lg:col-span-2 space-y-6">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h2 class="font-title-sm text-title-sm text-on-surface">수주 부스 리스트</h2>
|
||||||
|
<button class="text-primary font-label-md flex items-center gap-1">
|
||||||
|
전체보기 <span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Booth Card 1 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant border-l-4 border-l-primary overflow-hidden sharp-border transition-all hover:scale-[1.01] hover:shadow-lg">
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex justify-between items-start mb-6">
|
||||||
|
<div>
|
||||||
|
<span class="bg-primary-fixed text-on-primary-fixed-variant px-2 py-0.5 rounded text-label-xs mb-2 inline-block">Smart Factory 2026</span>
|
||||||
|
<h4 class="font-title-sm text-title-sm text-on-surface">스마트팩토리 코리아 2026</h4>
|
||||||
|
<div class="flex gap-4 mt-1 text-on-surface-variant font-body-sm">
|
||||||
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">grid_view</span> Booth A-102</span>
|
||||||
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">person</span> (주)한빛로보틱스</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-outline font-label-md">남은 기간</p>
|
||||||
|
<p class="font-title-sm text-error-red">D-14</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Construction Stepper -->
|
||||||
|
<div class="relative mb-8 px-4">
|
||||||
|
<div class="absolute top-4 left-4 right-4 h-0.5 bg-surface-container-high z-0"></div>
|
||||||
|
<div class="relative z-10 flex justify-between">
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-label-md">1</div>
|
||||||
|
<p class="text-label-md text-primary mt-2">설계</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-label-md ring-4 ring-primary-fixed">2</div>
|
||||||
|
<p class="text-label-md text-primary mt-2 font-bold">규정검증</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container-high text-outline flex items-center justify-center font-label-md">3</div>
|
||||||
|
<p class="text-label-md text-outline mt-2">반입</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container-high text-outline flex items-center justify-center font-label-md">4</div>
|
||||||
|
<p class="text-label-md text-outline mt-2">시공</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container-high text-outline flex items-center justify-center font-label-md">5</div>
|
||||||
|
<p class="text-label-md text-outline mt-2">검수</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Action Buttons -->
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="flex-1 py-2.5 bg-primary text-white font-label-md sharp-border hover:bg-primary-container transition-colors flex items-center justify-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">brush</span> 설계 스튜디오
|
||||||
|
</button>
|
||||||
|
<button class="flex-1 py-2.5 border border-outline-variant text-on-surface font-label-md sharp-border hover:bg-surface-container-low transition-colors flex items-center justify-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">description</span> 규정 리포트
|
||||||
|
</button>
|
||||||
|
<button class="flex-1 py-2.5 border border-outline-variant text-on-surface font-label-md sharp-border hover:bg-surface-container-low transition-colors flex items-center justify-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">event_available</span> 반입 예약
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Booth Card 2 (Secondary) -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant border-l-4 border-l-tertiary-container overflow-hidden sharp-border transition-all opacity-80 hover:opacity-100">
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex justify-between items-start mb-6">
|
||||||
|
<div>
|
||||||
|
<span class="bg-tertiary-fixed text-on-tertiary-fixed-variant px-2 py-0.5 rounded text-label-xs mb-2 inline-block">K-Medical Expo 2026</span>
|
||||||
|
<h4 class="font-title-sm text-title-sm text-on-surface">K-메디컬 엑스포</h4>
|
||||||
|
<div class="flex gap-4 mt-1 text-on-surface-variant font-body-sm">
|
||||||
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">grid_view</span> Booth D-405</span>
|
||||||
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">person</span> 세종메디텍</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-outline font-label-md">상태</p>
|
||||||
|
<p class="font-label-md text-tertiary-container">시공 예정</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="relative h-1 bg-surface-container-high rounded-full overflow-hidden">
|
||||||
|
<div class="absolute top-0 left-0 h-full bg-tertiary-container w-[15%]"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Main Right (1/3) - Widgets -->
|
||||||
|
<div class="space-y-8">
|
||||||
|
<!-- Auction Participation Widget -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant p-6 sharp-border">
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<h2 class="font-label-md text-label-md text-on-surface">옥션 참여 현황</h2>
|
||||||
|
<span class="material-symbols-outlined text-outline">gavel</span>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="p-3 bg-surface-container-low rounded border border-outline-variant/30 flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-on-surface">전기공사 - Hall 1</p>
|
||||||
|
<p class="text-label-xs text-outline mt-1">입찰가: 24,500,000₩</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<span class="bg-secondary-fixed text-on-secondary-fixed-variant px-2 py-0.5 rounded text-[10px] font-bold">2위</span>
|
||||||
|
<p class="text-error-red text-label-xs mt-1">D-2</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 bg-surface-container-low rounded border border-outline-variant/30 flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-on-surface">네트워크 가설 - Hall 3</p>
|
||||||
|
<p class="text-label-xs text-outline mt-1">입찰가: 12,000,000₩</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<span class="bg-primary-fixed text-on-primary-fixed-variant px-2 py-0.5 rounded text-[10px] font-bold">1위</span>
|
||||||
|
<p class="text-on-surface-variant text-label-xs mt-1">D-5</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 bg-surface-container-low rounded border border-outline-variant/30 flex justify-between items-center opacity-60">
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-on-surface">조명 렌탈 - 전시장 전체</p>
|
||||||
|
<p class="text-label-xs text-outline mt-1">입찰가: 45,000,000₩</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<span class="bg-surface-container-highest text-on-surface-variant px-2 py-0.5 rounded text-[10px] font-bold">5위</span>
|
||||||
|
<p class="text-on-surface-variant text-label-xs mt-1">D-1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="w-full mt-6 py-2 border-t border-outline-variant text-primary font-label-md hover:bg-surface-container-low transition-colors">
|
||||||
|
옥션 대시보드로 이동
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Notification Feed -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant p-6 sharp-border">
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<h2 class="font-label-md text-label-md text-on-surface">알림 피드</h2>
|
||||||
|
<span class="material-symbols-outlined text-outline">notifications_active</span>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-6 relative">
|
||||||
|
<div class="absolute left-[11px] top-2 bottom-2 w-0.5 bg-outline-variant opacity-30"></div>
|
||||||
|
<div class="relative pl-8">
|
||||||
|
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-primary-fixed flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-[14px] text-primary">check_circle</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-label-md text-on-surface">Booth A-102 규정 검증 완료</p>
|
||||||
|
<p class="text-label-xs text-outline">방금 전 · KINTEX 운영국</p>
|
||||||
|
</div>
|
||||||
|
<div class="relative pl-8">
|
||||||
|
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-error-container flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-[14px] text-error-red">warning</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-label-md text-on-surface">안전 교육 갱신 필요 알림</p>
|
||||||
|
<p class="text-label-xs text-outline">2시간 전 · 시스템</p>
|
||||||
|
</div>
|
||||||
|
<div class="relative pl-8">
|
||||||
|
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-surface-container-highest flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-[14px] text-on-surface-variant">info</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-label-md text-on-surface">신규 옥션 공고: 제 2전시장 외벽 래핑</p>
|
||||||
|
<p class="text-label-xs text-outline">어제 · 입찰관리부</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Contextual FAB (Only on relevant screens) -->
|
||||||
|
<button class="fixed bottom-8 right-8 w-14 h-14 bg-primary text-white rounded-full shadow-lg flex items-center justify-center hover:scale-110 active:scale-95 transition-transform z-50">
|
||||||
|
<span class="material-symbols-outlined text-[28px]">add</span>
|
||||||
|
</button>
|
||||||
|
<script>
|
||||||
|
// Simple Interaction Logic
|
||||||
|
document.querySelectorAll('nav a').forEach(link => {
|
||||||
|
link.addEventListener('click', (e) => {
|
||||||
|
// e.preventDefault();
|
||||||
|
// Navigation logic would go here
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hover animations for KPI cards
|
||||||
|
const kpiCards = document.querySelectorAll('.grid-cols-5 > div');
|
||||||
|
kpiCards.forEach(card => {
|
||||||
|
card.addEventListener('mouseenter', () => {
|
||||||
|
card.classList.add('shadow-md');
|
||||||
|
});
|
||||||
|
card.addEventListener('mouseleave', () => {
|
||||||
|
card.classList.remove('shadow-md');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
451
stitch_kintex_ai_system_architect/scr_39_worklog/code.html
Normal file
451
stitch_kintex_ai_system_architect/scr_39_worklog/code.html
Normal file
@ -0,0 +1,451 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>KINTEX AI - 업무일지 관리</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@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"/>
|
||||||
|
<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-container-low": "#f1f3ff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"outline": "#727781",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"outline-variant": "#c2c7d1",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"primary": "#003765",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"background": "#faf8ff"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"gutter": "16px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"section-padding": "96px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"body-sm": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body { font-family: 'Inter', 'Pretendard', sans-serif; }
|
||||||
|
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
||||||
|
.scrollbar-hide::-webkit-scrollbar { display: none; }
|
||||||
|
.table-zebra tr:nth-child(even) { background-color: #f1f3ff; }
|
||||||
|
.sticky-header { position: sticky; top: 0; z-index: 10; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-surface">
|
||||||
|
<!-- Sidebar (Predicted: SideNavBar) -->
|
||||||
|
<aside class="fixed left-0 top-0 h-screen w-[240px] bg-surface-container-lowest border-r border-outline-variant flex flex-col py-stack-lg z-50">
|
||||||
|
<div class="px-6 mb-8">
|
||||||
|
<h1 class="font-display-lg text-display-lg text-primary tracking-tight">KINTEX AI</h1>
|
||||||
|
<p class="text-label-xs text-on-surface-variant uppercase tracking-widest">Exhibition CMS</p>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 space-y-1">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200 cursor-pointer active:opacity-80">
|
||||||
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||||
|
<span class="font-body-base text-body-base">대시보드</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200 cursor-pointer active:opacity-80">
|
||||||
|
<span class="material-symbols-outlined" data-icon="calendar_today">calendar_today</span>
|
||||||
|
<span class="font-body-base text-body-base">전시 관리</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200 cursor-pointer active:opacity-80">
|
||||||
|
<span class="material-symbols-outlined" data-icon="meeting_room">meeting_room</span>
|
||||||
|
<span class="font-body-base text-body-base">시설 관리</span>
|
||||||
|
</div>
|
||||||
|
<!-- ACTIVE: Worklog -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 bg-secondary-fixed text-on-secondary-fixed font-bold border-l-4 border-primary cursor-pointer">
|
||||||
|
<span class="material-symbols-outlined" data-icon="edit_note" style="font-variation-settings: 'FILL' 1;">edit_note</span>
|
||||||
|
<span class="font-body-base text-body-base">업무일지</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200 cursor-pointer active:opacity-80">
|
||||||
|
<span class="material-symbols-outlined" data-icon="query_stats">query_stats</span>
|
||||||
|
<span class="font-body-base text-body-base">통계 분석</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200 cursor-pointer active:opacity-80">
|
||||||
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||||
|
<span class="font-body-base text-body-base">설정</span>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div class="mt-auto px-4">
|
||||||
|
<button class="w-full py-3 bg-primary text-on-primary rounded-lg flex items-center justify-center gap-2 font-bold hover:bg-primary-container transition-all">
|
||||||
|
<span class="material-symbols-outlined" data-icon="add">add</span>
|
||||||
|
<span>New Event</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Top Navigation (Predicted: TopNavBar) -->
|
||||||
|
<header class="fixed top-0 right-0 left-[240px] h-16 border-b border-outline-variant bg-surface-bright/80 backdrop-blur-md flex justify-between items-center px-gutter z-40">
|
||||||
|
<div class="flex items-center gap-4 flex-1">
|
||||||
|
<div class="relative w-full max-w-md">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant" data-icon="search">search</span>
|
||||||
|
<input class="w-full pl-10 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-full text-body-sm focus:outline-none focus:border-primary" placeholder="검색어를 입력하세요..." type="text"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-colors" data-icon="notifications">notifications</span>
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-colors" data-icon="help">help</span>
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-colors" data-icon="apps">apps</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-8 w-px bg-outline-variant"></div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="font-label-md text-label-md text-on-surface">Admin User</p>
|
||||||
|
<p class="text-[10px] text-on-surface-variant leading-none">시설지원팀 매니저</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-10 h-10 rounded-full bg-secondary-fixed flex items-center justify-center overflow-hidden border border-outline-variant">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A professional headshot of a Korean male office administrator in his 40s wearing a crisp white shirt and a company ID badge. He has a friendly yet professional expression. The background is a blurred office environment with corporate branding. The lighting is soft and natural, emphasizing high-fidelity corporate UI standards." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDdSzDOeFTOmTw-nGTeYpZnloLNWg9KQIcaw01QWfQj-AIUOFLrvZmhIX--2TMzMJppRWJVmCeETYiR9wHHbjOlM5Km6gj5MwUqfGWF5W71-nnDQb5Hlb8aoZzcxOyrgWVR2eOnjyvYLXx8g9zDZj0YH-Zugxk7EbGZH--k94m_SAxGnrzhf_ahstYaOQrl-vOg_W3YBZi3HcU6e6zHXqfzuK6vTqEhodJq2q-uzDSFi1dgO4C4JfmuW_QYZt5XBL0btF26onoEyIE"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Workspace -->
|
||||||
|
<main class="ml-[240px] pt-16 h-screen flex">
|
||||||
|
<!-- Worklog List (Left 2/3) -->
|
||||||
|
<section class="flex-1 flex flex-col p-stack-lg overflow-hidden">
|
||||||
|
<header class="mb-6 flex justify-between items-end">
|
||||||
|
<div>
|
||||||
|
<h2 class="font-headline-md text-headline-md text-primary">업무일지 관리</h2>
|
||||||
|
<p class="text-body-sm text-on-surface-variant">킨텍스 시설 및 전시 홀 운영 관련 일일 업무 현황</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="px-4 py-2 border border-outline-variant rounded-lg flex items-center gap-2 text-body-sm font-medium hover:bg-surface-container-low transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-[18px]" data-icon="download">download</span>
|
||||||
|
엑셀 다운로드
|
||||||
|
</button>
|
||||||
|
<button class="px-4 py-2 bg-primary text-on-primary rounded-lg flex items-center gap-2 text-body-sm font-bold shadow-md hover:bg-primary-container transition-all">
|
||||||
|
<span class="material-symbols-outlined text-[18px]" data-icon="edit">edit</span>
|
||||||
|
일지 작성
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Filter Bar -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant p-4 rounded-xl flex items-center gap-stack-md mb-stack-lg shadow-sm">
|
||||||
|
<div class="flex items-center gap-2 border-r border-outline-variant pr-4">
|
||||||
|
<span class="text-label-xs text-on-surface-variant font-bold uppercase">기간</span>
|
||||||
|
<input class="border-0 bg-transparent text-body-sm focus:ring-0 p-1 cursor-pointer" type="date"/>
|
||||||
|
<span class="text-on-surface-variant">-</span>
|
||||||
|
<input class="border-0 bg-transparent text-body-sm focus:ring-0 p-1 cursor-pointer" type="date"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 border-r border-outline-variant pr-4">
|
||||||
|
<span class="text-label-xs text-on-surface-variant font-bold uppercase">작성자</span>
|
||||||
|
<select class="border-0 bg-transparent text-body-sm focus:ring-0 p-1 cursor-pointer pr-8">
|
||||||
|
<option>전체</option>
|
||||||
|
<option>홍길동</option>
|
||||||
|
<option>이철수</option>
|
||||||
|
<option>김영희</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 flex-1">
|
||||||
|
<span class="text-label-xs text-on-surface-variant font-bold uppercase">유형</span>
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<span class="px-3 py-1 bg-primary text-on-primary rounded-full text-label-xs cursor-pointer">전체</span>
|
||||||
|
<span class="px-3 py-1 border border-outline-variant text-on-surface-variant rounded-full text-label-xs hover:bg-surface-container-low cursor-pointer">일반</span>
|
||||||
|
<span class="px-3 py-1 border border-outline-variant text-on-surface-variant rounded-full text-label-xs hover:bg-surface-container-low cursor-pointer">긴급</span>
|
||||||
|
<span class="px-3 py-1 border border-outline-variant text-on-surface-variant rounded-full text-label-xs hover:bg-surface-container-low cursor-pointer">정기</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="px-4 py-2 bg-secondary text-on-secondary rounded-lg text-body-sm font-bold">조회</button>
|
||||||
|
</div>
|
||||||
|
<!-- Table Container -->
|
||||||
|
<div class="flex-1 bg-surface-container-lowest border border-outline-variant rounded-xl overflow-auto shadow-sm">
|
||||||
|
<table class="w-full text-left border-collapse table-zebra">
|
||||||
|
<thead class="sticky-header bg-surface-container-high">
|
||||||
|
<tr class="h-[44px]">
|
||||||
|
<th class="px-4 py-2 font-label-md text-label-md text-on-surface border-b border-outline-variant w-32">날짜</th>
|
||||||
|
<th class="px-4 py-2 font-label-md text-label-md text-on-surface border-b border-outline-variant">제목</th>
|
||||||
|
<th class="px-4 py-2 font-label-md text-label-md text-on-surface border-b border-outline-variant w-24 text-center">유형</th>
|
||||||
|
<th class="px-4 py-2 font-label-md text-label-md text-on-surface border-b border-outline-variant w-28 text-center">진행상태</th>
|
||||||
|
<th class="px-4 py-2 font-label-md text-label-md text-on-surface border-b border-outline-variant w-20 text-right">공수</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="text-body-sm">
|
||||||
|
<!-- Row 1 -->
|
||||||
|
<tr class="h-[44px] hover:bg-primary-fixed/20 cursor-pointer transition-colors border-l-4 border-transparent hover:border-primary">
|
||||||
|
<td class="px-4 py-2 text-on-surface-variant font-label-md">2024-05-24</td>
|
||||||
|
<td class="px-4 py-2 font-medium">제1전시장 3홀 냉방 공조 시스템 필터 교체 작업</td>
|
||||||
|
<td class="px-4 py-2 text-center">
|
||||||
|
<span class="bg-tertiary-fixed text-on-tertiary-fixed-variant px-2 py-0.5 rounded text-[11px] font-bold">정기</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2 text-center">
|
||||||
|
<span class="bg-surface-container-highest text-on-surface-variant px-2 py-0.5 rounded-full text-[11px] font-bold">진행중</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2 text-right">4.0h</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 2 -->
|
||||||
|
<tr class="h-[44px] hover:bg-primary-fixed/20 cursor-pointer transition-colors border-l-4 border-transparent hover:border-primary">
|
||||||
|
<td class="px-4 py-2 text-on-surface-variant font-label-md">2024-05-24</td>
|
||||||
|
<td class="px-4 py-2 font-medium">야외 주차장 구역 조명 램프 불량 교체 (C구역)</td>
|
||||||
|
<td class="px-4 py-2 text-center">
|
||||||
|
<span class="bg-error-container text-on-error-container px-2 py-0.5 rounded text-[11px] font-bold">긴급</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2 text-center">
|
||||||
|
<span class="bg-secondary-fixed text-on-secondary-fixed-variant px-2 py-0.5 rounded-full text-[11px] font-bold">완료</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2 text-right">1.5h</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 3 -->
|
||||||
|
<tr class="h-[44px] hover:bg-primary-fixed/20 cursor-pointer transition-colors border-l-4 border-transparent hover:border-primary">
|
||||||
|
<td class="px-4 py-2 text-on-surface-variant font-label-md">2024-05-23</td>
|
||||||
|
<td class="px-4 py-2 font-medium">2024 서울 모빌리티 쇼 전력 부하 모니터링</td>
|
||||||
|
<td class="px-4 py-2 text-center">
|
||||||
|
<span class="bg-primary-fixed text-on-primary-fixed-variant px-2 py-0.5 rounded text-[11px] font-bold">일반</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2 text-center">
|
||||||
|
<span class="bg-secondary-fixed text-on-secondary-fixed-variant px-2 py-0.5 rounded-full text-[11px] font-bold">완료</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2 text-right">8.0h</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 4 -->
|
||||||
|
<tr class="h-[44px] hover:bg-primary-fixed/20 cursor-pointer transition-colors border-l-4 border-transparent hover:border-primary">
|
||||||
|
<td class="px-4 py-2 text-on-surface-variant font-label-md">2024-05-23</td>
|
||||||
|
<td class="px-4 py-2 font-medium">제2전시장 7-8홀 화장실 수전 누수 점검 및 보수</td>
|
||||||
|
<td class="px-4 py-2 text-center">
|
||||||
|
<span class="bg-tertiary-fixed text-on-tertiary-fixed-variant px-2 py-0.5 rounded text-[11px] font-bold">정기</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2 text-center">
|
||||||
|
<span class="bg-secondary-fixed text-on-secondary-fixed-variant px-2 py-0.5 rounded-full text-[11px] font-bold">완료</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2 text-right">2.0h</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 5 -->
|
||||||
|
<tr class="h-[44px] hover:bg-primary-fixed/20 cursor-pointer transition-colors border-l-4 border-transparent hover:border-primary">
|
||||||
|
<td class="px-4 py-2 text-on-surface-variant font-label-md">2024-05-22</td>
|
||||||
|
<td class="px-4 py-2 font-medium">그랜드볼룸 오디오 시스템 무선 마이크 수신 테스트</td>
|
||||||
|
<td class="px-4 py-2 text-center">
|
||||||
|
<span class="bg-primary-fixed text-on-primary-fixed-variant px-2 py-0.5 rounded text-[11px] font-bold">일반</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2 text-center">
|
||||||
|
<span class="bg-secondary-fixed text-on-secondary-fixed-variant px-2 py-0.5 rounded-full text-[11px] font-bold">완료</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2 text-right">3.0h</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 6 -->
|
||||||
|
<tr class="h-[44px] hover:bg-primary-fixed/20 cursor-pointer transition-colors border-l-4 border-transparent hover:border-primary">
|
||||||
|
<td class="px-4 py-2 text-on-surface-variant font-label-md">2024-05-22</td>
|
||||||
|
<td class="px-4 py-2 font-medium">전시장 바닥 마감재 크랙 보수 (5홀 입구측)</td>
|
||||||
|
<td class="px-4 py-2 text-center">
|
||||||
|
<span class="bg-tertiary-fixed text-on-tertiary-fixed-variant px-2 py-0.5 rounded text-[11px] font-bold">정기</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2 text-center">
|
||||||
|
<span class="bg-surface-container-highest text-on-surface-variant px-2 py-0.5 rounded-full text-[11px] font-bold">진행중</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2 text-right">4.5h</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<footer class="mt-4 flex justify-between items-center px-2">
|
||||||
|
<div class="text-label-xs text-on-surface-variant">Showing 1-6 of 128 results</div>
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<button class="w-8 h-8 rounded border border-outline-variant flex items-center justify-center hover:bg-surface-container-low"><span class="material-symbols-outlined text-[16px]">chevron_left</span></button>
|
||||||
|
<button class="w-8 h-8 rounded bg-primary text-on-primary font-bold text-label-xs">1</button>
|
||||||
|
<button class="w-8 h-8 rounded border border-outline-variant text-label-xs hover:bg-surface-container-low">2</button>
|
||||||
|
<button class="w-8 h-8 rounded border border-outline-variant text-label-xs hover:bg-surface-container-low">3</button>
|
||||||
|
<button class="w-8 h-8 rounded border border-outline-variant flex items-center justify-center hover:bg-surface-container-low"><span class="material-symbols-outlined text-[16px]">chevron_right</span></button>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
<!-- Detail/Compose Panel (Right 1/3) -->
|
||||||
|
<aside class="w-[440px] bg-surface-container-lowest border-l border-outline-variant flex flex-col shadow-2xl z-30">
|
||||||
|
<header class="p-stack-lg border-b border-outline-variant flex justify-between items-center">
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface">업무일지 상세/작성</h3>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="px-3 py-1.5 border border-error-red text-error-red rounded-lg text-label-md font-bold hover:bg-error-container transition-colors">삭제</button>
|
||||||
|
<button class="px-3 py-1.5 bg-primary text-on-primary rounded-lg text-label-md font-bold shadow hover:bg-primary-container transition-all">저장</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="flex-1 overflow-y-auto p-stack-lg space-y-stack-md scrollbar-hide">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="text-label-xs font-bold text-on-surface-variant uppercase">날짜</label>
|
||||||
|
<input class="w-full border border-outline-variant rounded-lg p-2.5 text-body-base bg-surface-bright focus:ring-1 focus:ring-primary focus:border-primary" type="date" value="2024-05-24"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="text-label-xs font-bold text-on-surface-variant uppercase">제목</label>
|
||||||
|
<input class="w-full border border-outline-variant rounded-lg p-2.5 text-body-base bg-surface-bright focus:ring-1 focus:ring-primary focus:border-primary" type="text" value="제1전시장 3홀 냉방 공조 시스템 필터 교체 작업"/>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-stack-md">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="text-label-xs font-bold text-on-surface-variant uppercase">유형</label>
|
||||||
|
<select class="w-full border border-outline-variant rounded-lg p-2.5 text-body-base bg-surface-bright focus:ring-1 focus:ring-primary focus:border-primary">
|
||||||
|
<option>일반</option>
|
||||||
|
<option>긴급</option>
|
||||||
|
<option selected="">정기</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="text-label-xs font-bold text-on-surface-variant uppercase">공수 (Hours)</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input class="w-full border border-outline-variant rounded-lg p-2.5 pr-10 text-body-base bg-surface-bright focus:ring-1 focus:ring-primary focus:border-primary" step="0.5" type="number" value="4.0"/>
|
||||||
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-label-md">h</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="text-label-xs font-bold text-on-surface-variant uppercase">주요 이슈</label>
|
||||||
|
<textarea class="w-full border border-outline-variant rounded-lg p-2.5 text-body-base bg-surface-bright focus:ring-1 focus:ring-primary focus:border-primary resize-none" placeholder="작업 내용 및 발생한 특이사항을 상세히 기록하세요." rows="6">3홀 북동측 공조기(AHU-03)의 헤파 필터 오염도가 기준치를 초과하여 신규 필터로 교체 완료함. 작업 중 댐퍼 구동부 소음이 발견되어 윤활유 보충 조치 하였으나, 차주 정밀 점검이 필요해 보임. 교체 후 풍량 및 온도 센서 정상 작동 확인.</textarea>
|
||||||
|
</div>
|
||||||
|
<!-- Media Attachments Preview (Custom Addition for Fidelity) -->
|
||||||
|
<div class="space-y-1 pt-2">
|
||||||
|
<label class="text-label-xs font-bold text-on-surface-variant uppercase">첨부 파일</label>
|
||||||
|
<div class="grid grid-cols-3 gap-2">
|
||||||
|
<div class="aspect-square rounded-lg border border-outline-variant overflow-hidden bg-surface-container relative group">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A macro shot of a dirty industrial air filter being replaced by a technician in a sterile, professional maintenance environment. Soft blue work lighting, high quality industrial photography." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB55qKhoiNURXmGZhubeuwELEM9_hP82kfpByxvt4UFMnTz4a6uD4ce2tbC6BJyg9Yb57fHM131Xs0Jxv6-1pDw77X-3KLSjdQCGLD6YVecU1_BBEyV3kN6L5gkV6rnA9YOUdrMe4rvG9KLDuYD1mLHgp_cUUNnR18KOii9Gi6_g9JgSsNS3w52BfHjfPKQL23tJ-mEqpOq2ri8OuHX6JIjHhHVNKnrRzW2YxaCMDbw2J3KiD6FntVHwka9TjcBKw6stCxk3uxvoEA"/>
|
||||||
|
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity cursor-pointer">
|
||||||
|
<span class="material-symbols-outlined text-white" data-icon="visibility">visibility</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="aspect-square rounded-lg border border-dashed border-outline-variant flex flex-col items-center justify-center text-on-surface-variant cursor-pointer hover:bg-surface-container-low">
|
||||||
|
<span class="material-symbols-outlined" data-icon="add_a_photo">add_a_photo</span>
|
||||||
|
<span class="text-[10px] mt-1">Add Photo</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Comment Section -->
|
||||||
|
<div class="pt-6 border-t border-outline-variant space-y-4">
|
||||||
|
<h4 class="text-label-md font-bold text-on-surface flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[18px]" data-icon="comment">comment</span>
|
||||||
|
히스토리 및 코멘트
|
||||||
|
</h4>
|
||||||
|
<div class="space-y-stack-md">
|
||||||
|
<!-- Comment 1 -->
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary-fixed flex-shrink-0 flex items-center justify-center text-primary font-bold text-[10px]">LS</div>
|
||||||
|
<div class="flex-1 bg-surface-container-low p-3 rounded-tr-xl rounded-br-xl rounded-bl-xl">
|
||||||
|
<div class="flex justify-between items-center mb-1">
|
||||||
|
<span class="text-label-xs font-bold">이승우 팀장</span>
|
||||||
|
<span class="text-[10px] text-on-surface-variant">2시간 전</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm">윤활유 조치 후에도 소음 지속될 경우 부품 교체 품의 부탁드립니다. 고생하셨습니다.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Comment 2 -->
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-secondary-fixed flex-shrink-0 flex items-center justify-center text-secondary font-bold text-[10px]">KH</div>
|
||||||
|
<div class="flex-1 bg-surface-container-low p-3 rounded-tr-xl rounded-br-xl rounded-bl-xl">
|
||||||
|
<div class="flex justify-between items-center mb-1">
|
||||||
|
<span class="text-label-xs font-bold">김현아 매니저</span>
|
||||||
|
<span class="text-[10px] text-on-surface-variant">1시간 전</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm">차주 정밀 점검 일정은 월요일 오전 10시로 잡아두었습니다.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Comment Input -->
|
||||||
|
<div class="p-stack-md border-t border-outline-variant bg-surface-bright">
|
||||||
|
<div class="relative">
|
||||||
|
<textarea class="w-full border border-outline-variant rounded-xl p-3 pr-12 text-body-sm bg-surface-container-lowest focus:ring-1 focus:ring-primary focus:border-primary resize-none h-12" placeholder="의견을 남겨주세요..."></textarea>
|
||||||
|
<button class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 bg-primary text-on-primary rounded-lg flex items-center justify-center shadow hover:bg-primary-container transition-all">
|
||||||
|
<span class="material-symbols-outlined text-[18px]" data-icon="send" style="font-variation-settings: 'FILL' 1;">send</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
<!-- Micro-interactions Script -->
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// Table row click simulation
|
||||||
|
const rows = document.querySelectorAll('tbody tr');
|
||||||
|
rows.forEach(row => {
|
||||||
|
row.addEventListener('click', () => {
|
||||||
|
// Update UI to show selected state (visual feedback)
|
||||||
|
rows.forEach(r => r.classList.remove('bg-primary-fixed/20', 'border-primary'));
|
||||||
|
row.classList.add('bg-primary-fixed/20', 'border-primary');
|
||||||
|
|
||||||
|
// In a real app, this would load the data into the right panel
|
||||||
|
console.log('Worklog entry selected:', row.cells[1].textContent);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Input focus animations
|
||||||
|
const inputs = document.querySelectorAll('input, select, textarea');
|
||||||
|
inputs.forEach(input => {
|
||||||
|
input.addEventListener('focus', () => {
|
||||||
|
input.parentElement.querySelector('label')?.classList.add('text-primary');
|
||||||
|
});
|
||||||
|
input.addEventListener('blur', () => {
|
||||||
|
input.parentElement.querySelector('label')?.classList.remove('text-primary');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
489
stitch_kintex_ai_system_architect/scr_40_schedule/code.html
Normal file
489
stitch_kintex_ai_system_architect/scr_40_schedule/code.html
Normal file
@ -0,0 +1,489 @@
|
|||||||
|
<!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 AI - 통합 일정 관리</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@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"/>
|
||||||
|
<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": {
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"outline-variant": "#c2c7d1",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"primary": "#003765",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"outline": "#727781",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-secondary-container": "#f3edff"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"section-padding": "96px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"display-lg-mobile": ["Inter"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"display-lg": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #faf8ff;
|
||||||
|
color: #141b2c;
|
||||||
|
font-family: 'Inter', 'Geist', sans-serif;
|
||||||
|
}
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.calendar-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, 1fr);
|
||||||
|
grid-auto-rows: minmax(120px, 1fr);
|
||||||
|
}
|
||||||
|
.calendar-cell {
|
||||||
|
border-right: 1px solid #c2c7d1;
|
||||||
|
border-bottom: 1px solid #c2c7d1;
|
||||||
|
}
|
||||||
|
.glass-overlay {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
.no-scrollbar::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="overflow-hidden">
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<aside class="w-[240px] h-screen fixed left-0 top-0 flex flex-col py-stack-lg bg-surface border-r border-outline-variant z-50">
|
||||||
|
<div class="px-6 mb-8 flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-on-primary">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">hub</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="font-headline-md text-headline-md font-bold text-primary leading-tight">KINTEX AI</h1>
|
||||||
|
<p class="text-label-md font-label-md text-on-surface-variant">전시관리 시스템</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 px-3 space-y-1">
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="font-label-md text-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-primary border-l-4 border-primary bg-primary-fixed transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">calendar_month</span>
|
||||||
|
<span class="font-label-md text-label-md">Exhibition Schedule</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">groups</span>
|
||||||
|
<span class="font-label-md text-label-md">Team Calendar</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">map</span>
|
||||||
|
<span class="font-label-md text-label-md">Venue Map</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">account_tree</span>
|
||||||
|
<span class="font-label-md text-label-md">Booth Management</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">query_stats</span>
|
||||||
|
<span class="font-label-md text-label-md">Analytics</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="px-6 mb-4">
|
||||||
|
<button class="w-full py-3 bg-primary text-on-primary rounded-xl font-label-md text-label-md flex items-center justify-center gap-2 shadow-md hover:opacity-90 transition-opacity">
|
||||||
|
<span class="material-symbols-outlined text-sm">add</span>
|
||||||
|
New Exhibition
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="px-3 border-t border-outline-variant pt-4 space-y-1">
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span class="font-label-md text-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">help_outline</span>
|
||||||
|
<span class="font-label-md text-label-md">Help Center</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="flex justify-between items-center h-16 px-gutter w-[calc(100%-240px)] ml-[240px] bg-surface-bright sticky top-0 border-b border-outline-variant z-40">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="flex items-center gap-2 text-on-surface-variant font-body-base text-body-base">
|
||||||
|
<span>일정 관리</span>
|
||||||
|
<span class="material-symbols-outlined text-sm">chevron_right</span>
|
||||||
|
<span class="font-bold text-on-surface">통합 일정</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-6 w-px bg-outline-variant mx-2"></div>
|
||||||
|
<div class="relative flex items-center">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 text-on-surface-variant text-[20px]">search</span>
|
||||||
|
<input class="pl-10 pr-4 py-1.5 bg-surface-container-low border border-outline-variant rounded-full text-body-sm w-64 focus:ring-2 focus:ring-primary focus:outline-none transition-all" placeholder="행사명 또는 일정 검색" type="text"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<div class="flex gap-6">
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-base text-body-base" href="#">Overview</a>
|
||||||
|
<a class="text-primary font-bold border-b-2 border-primary pb-1 transition-colors font-body-base text-body-base" href="#">Reports</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-base text-body-base" href="#">Inventory</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button class="text-on-surface-variant hover:bg-surface-container p-2 rounded-full transition-colors relative">
|
||||||
|
<span class="material-symbols-outlined">notifications</span>
|
||||||
|
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-error rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
<button class="text-on-surface-variant hover:bg-surface-container p-2 rounded-full transition-colors">
|
||||||
|
<span class="material-symbols-outlined">apps</span>
|
||||||
|
</button>
|
||||||
|
<div class="flex items-center gap-3 ml-2 cursor-pointer hover:bg-surface-container p-1 rounded-lg transition-colors">
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="font-title-sm text-[12px] leading-tight text-on-surface">관리자 센터</p>
|
||||||
|
<p class="text-label-xs text-on-surface-variant">Admin Profile</p>
|
||||||
|
</div>
|
||||||
|
<img class="w-9 h-9 rounded-full object-cover border border-outline-variant" data-alt="A professional headshot of a Korean male executive in his 40s, wearing a modern charcoal suit and glasses. He has a friendly but authoritative expression, posed against a blurred office background with cool lighting. The image style is crisp, clean, and corporate, matching the high-end KINTEX enterprise UI." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBTpg-HNyFtLE30U8EyhTmr9MJq8wnTEI98vPeIQ7JbcVo8AbRXYFUpR7cAXGSc-leUYsBqf_5sA8kxKzrIYHZTMvDmvq9c6J43UWA_bMrRbAUIJJTD6tWXpi0O3ugHzpKFm8Bt3UwMi5nr2hrxX5NOP2wZC10nAT_Pdhvc1jO6iFmiFzBHElPOLZwQv5_YkMHr8S3damK63qGvEo6Sf1K8az7BkCTbN3O-g8McAU355md88yptQekHdcCQ3r8V8EOSMmdTRDOgG64"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Content Cluster -->
|
||||||
|
<main class="ml-[240px] w-[calc(100%-240px)] h-[calc(100vh-64px)] flex overflow-hidden">
|
||||||
|
<!-- Calendar Section -->
|
||||||
|
<section class="flex-1 flex flex-col bg-white border-r border-outline-variant overflow-y-auto no-scrollbar">
|
||||||
|
<!-- Calendar Header -->
|
||||||
|
<div class="p-6 flex items-center justify-between border-b border-outline-variant bg-white">
|
||||||
|
<div class="flex items-center gap-8">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<h2 class="font-display-lg text-display-lg text-primary tracking-tight">2026년 8월</h2>
|
||||||
|
<div class="flex border border-outline-variant rounded-lg overflow-hidden shadow-sm">
|
||||||
|
<button class="p-2 hover:bg-surface-container transition-colors"><span class="material-symbols-outlined">chevron_left</span></button>
|
||||||
|
<button class="px-4 text-label-md font-label-md border-x border-outline-variant hover:bg-surface-container transition-colors">오늘</button>
|
||||||
|
<button class="p-2 hover:bg-surface-container transition-colors"><span class="material-symbols-outlined">chevron_right</span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Legend -->
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="w-3 h-3 rounded-full bg-primary"></span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface-variant">행사 마일스톤</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="w-3 h-3 rounded-full bg-secondary"></span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface-variant">옥션 마감</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="w-3 h-3 rounded-full bg-tertiary-container"></span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface-variant">반입 슬롯</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- View Toggles -->
|
||||||
|
<div class="flex bg-surface-container-low p-1 rounded-lg border border-outline-variant">
|
||||||
|
<button class="px-4 py-1.5 rounded-md text-label-md font-label-md bg-white shadow-sm text-primary">월</button>
|
||||||
|
<button class="px-4 py-1.5 rounded-md text-label-md font-label-md text-on-surface-variant hover:bg-white transition-all">주</button>
|
||||||
|
<button class="px-4 py-1.5 rounded-md text-label-md font-label-md text-on-surface-variant hover:bg-white transition-all">일</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Calendar Body -->
|
||||||
|
<div class="calendar-grid flex-1 border-l border-t border-outline-variant bg-surface-container-lowest">
|
||||||
|
<!-- Day Labels -->
|
||||||
|
<div class="h-10 flex items-center justify-center font-label-md text-label-md text-error-red bg-surface-container-low border-r border-b border-outline-variant">일</div>
|
||||||
|
<div class="h-10 flex items-center justify-center font-label-md text-label-md text-on-surface-variant bg-surface-container-low border-r border-b border-outline-variant">월</div>
|
||||||
|
<div class="h-10 flex items-center justify-center font-label-md text-label-md text-on-surface-variant bg-surface-container-low border-r border-b border-outline-variant">화</div>
|
||||||
|
<div class="h-10 flex items-center justify-center font-label-md text-label-md text-on-surface-variant bg-surface-container-low border-r border-b border-outline-variant">수</div>
|
||||||
|
<div class="h-10 flex items-center justify-center font-label-md text-label-md text-on-surface-variant bg-surface-container-low border-r border-b border-outline-variant">목</div>
|
||||||
|
<div class="h-10 flex items-center justify-center font-label-md text-label-md text-on-surface-variant bg-surface-container-low border-r border-b border-outline-variant">금</div>
|
||||||
|
<div class="h-10 flex items-center justify-center font-label-md text-label-md text-primary bg-surface-container-low border-r border-b border-outline-variant">토</div>
|
||||||
|
<!-- Empty Cells for start of month (August 2026 starts on Saturday) -->
|
||||||
|
<div class="calendar-cell bg-surface-container-lowest opacity-40"></div>
|
||||||
|
<div class="calendar-cell bg-surface-container-lowest opacity-40"></div>
|
||||||
|
<div class="calendar-cell bg-surface-container-lowest opacity-40"></div>
|
||||||
|
<div class="calendar-cell bg-surface-container-lowest opacity-40"></div>
|
||||||
|
<div class="calendar-cell bg-surface-container-lowest opacity-40"></div>
|
||||||
|
<div class="calendar-cell bg-surface-container-lowest opacity-40"></div>
|
||||||
|
<!-- Days -->
|
||||||
|
<div class="calendar-cell p-2">
|
||||||
|
<span class="text-label-md text-primary">1</span>
|
||||||
|
</div>
|
||||||
|
<div class="calendar-cell p-2 bg-error-container/10">
|
||||||
|
<span class="text-label-md text-error-red">2</span>
|
||||||
|
</div>
|
||||||
|
<div class="calendar-cell p-2">
|
||||||
|
<span class="text-label-md text-on-surface-variant">3</span>
|
||||||
|
<div class="mt-1 space-y-1">
|
||||||
|
<div class="bg-primary-fixed px-2 py-0.5 rounded text-[10px] font-bold text-primary truncate">글로벌 무역 전시회</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Highlighted Active Day -->
|
||||||
|
<div class="calendar-cell p-2 bg-primary-fixed/30 ring-2 ring-primary ring-inset z-10">
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
|
<span class="text-label-md font-bold text-primary">4</span>
|
||||||
|
<span class="material-symbols-outlined text-primary text-[14px]">push_pin</span>
|
||||||
|
</div>
|
||||||
|
<div class="mt-1 space-y-1">
|
||||||
|
<div class="bg-secondary px-2 py-1 rounded text-[10px] font-bold text-on-secondary truncate">1홀 전기공사 옥션 마감</div>
|
||||||
|
<div class="bg-tertiary-container px-2 py-1 rounded text-[10px] font-bold text-on-tertiary truncate">환경 개선 정비</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">5</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">6</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">7</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-primary">8</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-error-red">9</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">10</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">11</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">12</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">13</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">14</span></div>
|
||||||
|
<div class="calendar-cell p-2 bg-error-container/20"><span class="text-label-md text-error-red font-bold">15 (광복절)</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-error-red">16</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">17</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">18</span></div>
|
||||||
|
<div class="calendar-cell p-2">
|
||||||
|
<span class="text-label-md text-on-surface-variant">19</span>
|
||||||
|
<div class="mt-1">
|
||||||
|
<div class="bg-tertiary-fixed-dim px-2 py-1 rounded text-[10px] font-bold text-on-tertiary-fixed truncate border-l-4 border-tertiary">글로벌 무역상사 반입</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- ... more cells -->
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">20</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">21</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-primary">22</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-error-red">23</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">24</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">25</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">26</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">27</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">28</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-primary">29</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-error-red">30</span></div>
|
||||||
|
<div class="calendar-cell p-2"><span class="text-label-md text-on-surface-variant">31</span></div>
|
||||||
|
</div>
|
||||||
|
<!-- Footer Notice -->
|
||||||
|
<footer class="p-4 bg-surface-container-low border-t border-outline-variant flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-3 text-body-sm">
|
||||||
|
<span class="material-symbols-outlined text-error-red">info</span>
|
||||||
|
<p class="text-on-surface-variant">다가오는 공휴일 안내: 8월 15일은 광복절로 시스템 점검이 예정되어 있습니다. 원활한 전시 관리를 위해 일정을 미리 확인해 주세요.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<button class="text-label-md font-label-md text-primary hover:underline">상세 공지사항</button>
|
||||||
|
<button class="text-label-md font-label-md text-primary hover:underline">시스템 도움말</button>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
<!-- Right Agenda Panel -->
|
||||||
|
<aside class="w-[400px] flex flex-col bg-surface border-l border-outline-variant overflow-y-auto no-scrollbar">
|
||||||
|
<div class="p-6 sticky top-0 bg-surface z-20 border-b border-outline-variant">
|
||||||
|
<div class="flex justify-between items-center mb-6">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface">2026. 08. 04 (화)</h3>
|
||||||
|
<p class="text-label-md font-label-md text-on-surface-variant">선택된 날짜의 상세 일정입니다.</p>
|
||||||
|
</div>
|
||||||
|
<button class="w-12 h-12 rounded-full bg-primary-fixed-dim text-primary flex items-center justify-center hover:bg-primary-fixed transition-colors shadow-sm">
|
||||||
|
<span class="material-symbols-outlined">filter_list</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button class="w-full py-4 bg-primary text-on-primary rounded-xl font-bold flex items-center justify-center gap-2 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all">
|
||||||
|
<span class="material-symbols-outlined">add_circle</span>
|
||||||
|
+ 일정 추가
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 space-y-gutter">
|
||||||
|
<!-- Agenda Card 1 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-md flex gap-4 hover:shadow-md transition-shadow relative overflow-hidden group">
|
||||||
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-secondary"></div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<span class="px-2 py-0.5 bg-secondary-fixed text-on-secondary-fixed-variant rounded text-label-xs font-bold uppercase tracking-wider">옥션 마감</span>
|
||||||
|
<span class="text-label-xs font-label-md text-on-surface-variant flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">schedule</span>
|
||||||
|
09:00 - 10:00
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-title-sm text-title-sm text-on-surface mb-1">1홀 전기공사 옥션 마감</h4>
|
||||||
|
<div class="flex items-center gap-1 text-label-md font-label-md text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">location_on</span>
|
||||||
|
KINTEX 1전시장 사무동
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 pt-4 border-t border-outline-variant flex items-center justify-between">
|
||||||
|
<div class="flex -space-x-2">
|
||||||
|
<img class="w-6 h-6 rounded-full border-2 border-white object-cover" data-alt="A small avatar of a professional business woman with short hair and an optimistic look, wearing a light blue blouse. Studio lighting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBJHwhGIOON8yXhp3OwDV5N9YwutvIhEUjKAgdEQICRDf_Xqri2ZL5WOQeG9sNzzVHymgyj3NuXaLaXK3tLXZy4MfyUvXdBlCokrU0A-i-VQ5WRuIZXoxb4ORndnvvzir3ityxxIMR4BfveRgnRKUf5GFw7or6g-_klVywfxj_S5biFpgglxnxD7zM9zQKzsc8AinL_NCrxe_Fi9I8jGcUkgSKSDfllPaEiGniBIFwmhh-0O1pSCbslzjL8ahu5w1-GhjX8pXRTBkY"/>
|
||||||
|
<img class="w-6 h-6 rounded-full border-2 border-white object-cover" data-alt="A small avatar of a young male professional in creative business casual attire, dark glasses, warm indoor lighting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCwqFmeEJ9_FpTvEn5lVQkr9GeAa8bmo7lgARBRUHn0njL4JPRUjiaJpZMIH7Jut1C1N5LU20er0AWp-6GGAlH-GqZbcusLBDcuZrAhJtxDjGW2PKX5AQ9pTXlmZ3Y_WxKve6qSUkajhRxQZBoOCYlG157Qf_P_XtuT3lf9rJ2iLvJ0JkygxQiakGFboeiVlId5oe8MjLy3jxe9nhZFrgrpQwAB5hYF3wHOzCKJ8tW1nlyAI4QeNyblU6XUS3GpGn9uymtUxKZwkv4"/>
|
||||||
|
<div class="w-6 h-6 rounded-full border-2 border-white bg-surface-container text-[8px] flex items-center justify-center text-on-surface-variant font-bold">+3</div>
|
||||||
|
</div>
|
||||||
|
<button class="text-primary opacity-0 group-hover:opacity-100 transition-opacity"><span class="material-symbols-outlined">more_horiz</span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Agenda Card 2 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-md flex gap-4 hover:shadow-md transition-shadow relative overflow-hidden group">
|
||||||
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-tertiary-container"></div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<span class="px-2 py-0.5 bg-tertiary-fixed text-on-tertiary-fixed-variant rounded text-label-xs font-bold uppercase tracking-wider">반입 슬롯</span>
|
||||||
|
<span class="text-label-xs font-label-md text-on-surface-variant flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">schedule</span>
|
||||||
|
14:00 - 16:00
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-title-sm text-title-sm text-on-surface mb-1">(주)테크솔루션 반입 작업</h4>
|
||||||
|
<div class="flex items-center gap-1 text-label-md font-label-md text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">location_on</span>
|
||||||
|
2홀 B구역 하역장
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Agenda Card 3 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-md flex gap-4 hover:shadow-md transition-shadow relative overflow-hidden group">
|
||||||
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-primary"></div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<span class="px-2 py-0.5 bg-primary-fixed text-on-primary-fixed-variant rounded text-label-xs font-bold uppercase tracking-wider">행사 점검</span>
|
||||||
|
<span class="text-label-xs font-label-md text-on-surface-variant flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">schedule</span>
|
||||||
|
16:30 - 17:30
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-title-sm text-title-sm text-on-surface mb-1">스마트팩토리 현장 안전 점검</h4>
|
||||||
|
<div class="flex items-center gap-1 text-label-md font-label-md text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">location_on</span>
|
||||||
|
1~3홀 전구역
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Stats/Briefing -->
|
||||||
|
<div class="mt-8 p-6 rounded-2xl bg-gradient-to-br from-primary to-primary-container text-on-primary shadow-lg">
|
||||||
|
<h5 class="font-label-md text-label-md text-on-primary-container mb-4">오늘의 전시 브리핑</h5>
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="bg-white/10 backdrop-blur-md p-3 rounded-lg border border-white/20">
|
||||||
|
<p class="text-label-xs mb-1 opacity-80">누적 참관객</p>
|
||||||
|
<p class="font-headline-md text-headline-md">12.4k</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white/10 backdrop-blur-md p-3 rounded-lg border border-white/20">
|
||||||
|
<p class="text-label-xs mb-1 opacity-80">점검 완료율</p>
|
||||||
|
<p class="font-headline-md text-headline-md">86%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="w-full mt-4 py-2 border border-white/30 rounded-lg text-label-md font-bold hover:bg-white/10 transition-colors">전체 통계 보기</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
<!-- Interactions Layer -->
|
||||||
|
<div class="fixed bottom-8 right-8 z-[100] pointer-events-none" id="toast-container"></div>
|
||||||
|
<script>
|
||||||
|
// Simple Interaction logic
|
||||||
|
document.querySelectorAll('.calendar-cell').forEach(cell => {
|
||||||
|
cell.addEventListener('click', () => {
|
||||||
|
// Mock behavior: transition active day
|
||||||
|
document.querySelectorAll('.calendar-cell').forEach(c => c.classList.remove('bg-primary-fixed/30', 'ring-2', 'ring-primary', 'ring-inset'));
|
||||||
|
cell.classList.add('bg-primary-fixed/30', 'ring-2', 'ring-primary', 'ring-inset');
|
||||||
|
|
||||||
|
// Show notification for UX feedback
|
||||||
|
const day = cell.querySelector('span').innerText;
|
||||||
|
showToast(`2026년 8월 ${day}일 일정을 불러왔습니다.`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function showToast(message) {
|
||||||
|
const container = document.getElementById('toast-container');
|
||||||
|
const toast = document.createElement('div');
|
||||||
|
toast.className = 'pointer-events-auto bg-inverse-surface text-inverse-on-surface px-6 py-3 rounded-full shadow-2xl flex items-center gap-3 mb-3 animate-bounce-short';
|
||||||
|
toast.innerHTML = `
|
||||||
|
<span class="material-symbols-outlined text-tertiary-fixed">check_circle</span>
|
||||||
|
<span class="text-label-md">${message}</span>
|
||||||
|
`;
|
||||||
|
container.appendChild(toast);
|
||||||
|
setTimeout(() => {
|
||||||
|
toast.classList.add('opacity-0', 'translate-y-4');
|
||||||
|
toast.style.transition = 'all 0.5s ease';
|
||||||
|
setTimeout(() => toast.remove(), 500);
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
@keyframes bounce-short {
|
||||||
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-4px); }
|
||||||
|
}
|
||||||
|
.animate-bounce-short {
|
||||||
|
animation: bounce-short 0.4s ease-out;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body></html>
|
||||||
363
stitch_kintex_ai_system_architect/scr_41_message/code.html
Normal file
363
stitch_kintex_ai_system_architect/scr_41_message/code.html
Normal file
@ -0,0 +1,363 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>쪽지 - KINTEX AI 전시관리</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&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": {
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"outline-variant": "#c2c7d1",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"primary": "#003765",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"outline": "#727781",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"error": "#ba1a1a"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"base": "4px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"container-padding": "24px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"body-base": ["Inter"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body { font-family: 'Inter', sans-serif; }
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.message-active { border-left: 4px solid #003765; background-color: #f2f3ff; }
|
||||||
|
::-webkit-scrollbar { width: 6px; }
|
||||||
|
::-webkit-scrollbar-track { background: transparent; }
|
||||||
|
::-webkit-scrollbar-thumb { background: #dbe2fa; border-radius: 10px; }
|
||||||
|
::-webkit-scrollbar-thumb:hover { background: #c2c7d1; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-surface overflow-hidden h-screen flex flex-col">
|
||||||
|
<!-- Top AppBar -->
|
||||||
|
<header class="bg-primary dark:bg-primary-container text-on-primary dark:text-on-primary-container flex justify-between items-center w-full px-container-padding h-16 shadow-md z-30">
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<span class="font-title-sm text-title-sm font-bold text-on-primary">KINTEX AI 전시관리</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<div class="relative flex items-center bg-primary-container/20 rounded-full px-4 py-1.5 border border-on-primary/20">
|
||||||
|
<span class="material-symbols-outlined text-[20px] mr-2">search</span>
|
||||||
|
<input class="bg-transparent border-none focus:ring-0 text-label-md font-label-md placeholder:text-on-primary-fixed-variant w-48" placeholder="통합 검색..." type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="p-2 hover:bg-primary-container/20 transition-colors rounded-full"><span class="material-symbols-outlined">notifications</span></button>
|
||||||
|
<button class="p-2 hover:bg-primary-container/20 transition-colors rounded-full"><span class="material-symbols-outlined">settings</span></button>
|
||||||
|
<button class="p-2 hover:bg-primary-container/20 transition-colors rounded-full"><span class="material-symbols-outlined">help</span></button>
|
||||||
|
</div>
|
||||||
|
<div class="h-8 w-8 rounded-full bg-surface-container-highest overflow-hidden border border-on-primary/20">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A professional headshot of a middle-aged Korean businesswoman with glasses and a friendly, confident expression, captured against a clean professional blue background in high definition photography style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC5rKqg2BdLb7_vCTJoBxVXmCmPoytY9hx4E_7SfcwPO2bohMXp3cfqiRMWBp3sbHEKgECduIF3LvN6lIRUQ1cIYE6WKe76wmo5BcVv-DpUVCux-pEiDiLgPnmVoH6ddUj_Aa3hYCcCvLS9_Vk2BDz5ZoEIo5XTiiwtrwTxJgnhciOl0Y8kZ-4UoFANSJv8UdVreCXEwqgEMw8j9p248uQkRUvzhLSaeAMSTtRiO0eYZ4JWa1a1OtbJ4rhT8OaZOOQUwKMu0gBD32s"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="flex flex-1 overflow-hidden">
|
||||||
|
<!-- Left SideNavBar (Main Navigation) -->
|
||||||
|
<aside class="fixed left-0 top-16 bottom-0 w-[240px] flex flex-col p-stack-md gap-stack-sm bg-surface-container-low dark:bg-surface-container-lowest border-r border-outline-variant z-20">
|
||||||
|
<div class="mb-stack-lg px-2 pt-2">
|
||||||
|
<img alt="KINTEX 로고" class="h-8 w-auto" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCJR_RAHfgu28C4f_aqO2MiJrSmrLanG4w4MMSTRHAcRC-l_R4Oz0nwfcIdloJ9sSAy5JY5mcb3owuBgr4LSVFJs-2RvIvx1bQCR1mh7M5VSjgbwnuHwIBMazmY62BBjKlYmudQX2p0-3u3FHiF8TJttFpEDaoPsTk4jb2w_Y5gy-1Mme5i3okR6uN7uz6uNmgKDXnUDOaIC5DSWb2OnpcU53duc64TKp9leFYNeaFfUXjc9oak30BFMiJLhqK1aCGtHHncUyq_VQM"/>
|
||||||
|
<p class="mt-4 font-headline-md text-headline-md text-primary font-black">전시관리 시스템</p>
|
||||||
|
<p class="font-label-md text-label-md text-on-surface-variant">KINTEX AI Admin</p>
|
||||||
|
</div>
|
||||||
|
<nav class="flex flex-col gap-1">
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/50 rounded-xl transition-all group active:scale-95 duration-100" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="font-label-md text-label-md">대시보드</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/50 rounded-xl transition-all group active:scale-95 duration-100" href="#">
|
||||||
|
<span class="material-symbols-outlined">event</span>
|
||||||
|
<span class="font-label-md text-label-md">전시 일정</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container font-bold rounded-xl active:scale-95 duration-100" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">mail</span>
|
||||||
|
<span class="font-label-md text-label-md">쪽지</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/50 rounded-xl transition-all group active:scale-95 duration-100" href="#">
|
||||||
|
<span class="material-symbols-outlined">task</span>
|
||||||
|
<span class="font-label-md text-label-md">업무 관리</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/50 rounded-xl transition-all group active:scale-95 duration-100" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span class="font-label-md text-label-md">설정</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="mt-auto flex flex-col gap-1 border-t border-outline-variant pt-stack-md">
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-highest transition-all rounded-xl" href="#">
|
||||||
|
<span class="material-symbols-outlined">support_agent</span>
|
||||||
|
<span class="font-label-md text-label-md">지원센터</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-highest transition-all rounded-xl" href="#">
|
||||||
|
<span class="material-symbols-outlined">logout</span>
|
||||||
|
<span class="font-label-md text-label-md">로그아웃</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Sub-Navigation Rail & Messaging Panes -->
|
||||||
|
<main class="ml-[240px] flex w-full h-full bg-surface-container-lowest overflow-hidden">
|
||||||
|
<!-- Folder List Pane -->
|
||||||
|
<div class="w-64 border-r border-outline-variant flex flex-col bg-surface-container-low/30 h-full">
|
||||||
|
<div class="p-4 border-b border-outline-variant">
|
||||||
|
<button class="w-full bg-primary text-on-primary py-3 px-4 rounded-full flex items-center justify-center gap-2 font-label-md text-label-md shadow-md hover:bg-primary-container transition-colors active:scale-95">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">edit_note</span>
|
||||||
|
쪽지 쓰기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="p-2 overflow-y-auto">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<a class="flex items-center justify-between px-3 py-2.5 bg-primary-container/10 text-primary rounded-lg font-bold group" href="#">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">inbox</span>
|
||||||
|
<span class="text-body-base font-body-base">받은 쪽지함</span>
|
||||||
|
</div>
|
||||||
|
<span class="bg-primary text-on-primary text-[10px] px-2 py-0.5 rounded-full">12</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-variant/40 rounded-lg group transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">send</span>
|
||||||
|
<span class="text-body-base font-body-base">보낸 쪽지함</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-variant/40 rounded-lg group transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">draft</span>
|
||||||
|
<span class="text-body-base font-body-base">임시보관함</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-variant/40 rounded-lg group transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">report</span>
|
||||||
|
<span class="text-body-base font-body-base">스팸 쪽지함</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-variant/40 rounded-lg group transition-colors border-t border-outline-variant/30 mt-2" href="#">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">delete</span>
|
||||||
|
<span class="text-body-base font-body-base">휴지통</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Middle Message List Pane -->
|
||||||
|
<div class="w-96 border-r border-outline-variant flex flex-col h-full bg-white">
|
||||||
|
<div class="p-4 flex flex-col gap-3 border-b border-outline-variant">
|
||||||
|
<div class="relative">
|
||||||
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-outline text-[18px]">search</span>
|
||||||
|
<input class="w-full pl-10 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-full text-body-sm font-body-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none" placeholder="쪽지 검색" type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="px-3 py-1 bg-primary-container/20 text-primary border border-primary-container/30 rounded-full font-label-md text-label-md">전체</button>
|
||||||
|
<button class="px-3 py-1 hover:bg-surface-container text-on-surface-variant border border-outline-variant rounded-full font-label-md text-label-md">안읽음</button>
|
||||||
|
<button class="px-3 py-1 hover:bg-surface-container text-on-surface-variant border border-outline-variant rounded-full font-label-md text-label-md">중요</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 overflow-y-auto divide-y divide-outline-variant/50">
|
||||||
|
<!-- Message Item Active -->
|
||||||
|
<div class="p-4 cursor-pointer hover:bg-surface-container-low transition-colors message-active relative group">
|
||||||
|
<div class="flex justify-between items-start mb-1">
|
||||||
|
<span class="font-bold text-on-surface text-body-base">박진우 본부장</span>
|
||||||
|
<span class="text-label-xs font-label-xs text-outline">오전 10:45</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="w-2 h-2 bg-primary rounded-full"></span>
|
||||||
|
<h3 class="font-bold text-on-surface text-body-base truncate">2026 스마트팩토리 전시홀 배치 협의 건</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant line-clamp-2">금일 오후 3시에 있을 전시홀 배치 관련하여 사전에 공유드린 도면...</p>
|
||||||
|
<div class="absolute right-4 bottom-4 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<span class="material-symbols-outlined text-outline hover:text-primary">star</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Message Item 2 -->
|
||||||
|
<div class="p-4 cursor-pointer hover:bg-surface-container-low transition-colors">
|
||||||
|
<div class="flex justify-between items-start mb-1">
|
||||||
|
<span class="text-on-surface text-body-base font-semibold">김서연 과장</span>
|
||||||
|
<span class="text-label-xs font-label-xs text-outline">어제</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="w-2 h-2 bg-transparent"></span>
|
||||||
|
<h3 class="text-on-surface text-body-base truncate">차주 보안 업체 계약 연장 관련 건</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant line-clamp-2">보안 업체에서 전달받은 계약 연장 조건입니다. 확인 부탁드립...</p>
|
||||||
|
</div>
|
||||||
|
<!-- Message Item 3 -->
|
||||||
|
<div class="p-4 cursor-pointer hover:bg-surface-container-low transition-colors">
|
||||||
|
<div class="flex justify-between items-start mb-1">
|
||||||
|
<span class="text-on-surface text-body-base font-semibold">정훈 팀장</span>
|
||||||
|
<span class="text-label-xs font-label-xs text-outline">10월 24일</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="w-2 h-2 bg-transparent"></span>
|
||||||
|
<h3 class="text-on-surface text-body-base truncate">[공지] 제1전시장 환경 정비 안내</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant line-clamp-2">안녕하세요. 이번 주말 전시장 전체 청소 및 방역이 실시될 예정입니다...</p>
|
||||||
|
</div>
|
||||||
|
<!-- Message Item 4 -->
|
||||||
|
<div class="p-4 cursor-pointer hover:bg-surface-container-low transition-colors">
|
||||||
|
<div class="flex justify-between items-start mb-1">
|
||||||
|
<span class="text-on-surface text-body-base font-semibold">이민재 대리</span>
|
||||||
|
<span class="text-label-xs font-label-xs text-outline">10월 23일</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="w-2 h-2 bg-transparent"></span>
|
||||||
|
<h3 class="text-on-surface text-body-base truncate">VIP 케이터링 업체 제안서 송부</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant line-clamp-2">차주 행사에 사용될 케이터링 업체 3곳의 제안서와 견적서 취합본입니...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Right Reading Pane -->
|
||||||
|
<div class="flex-1 flex flex-col h-full bg-white relative">
|
||||||
|
<!-- Message Header -->
|
||||||
|
<div class="px-8 py-6 border-b border-outline-variant">
|
||||||
|
<div class="flex justify-between items-start mb-6">
|
||||||
|
<h1 class="text-headline-md font-headline-md text-on-surface">2026 스마트팩토리 전시홀 배치 협의 건</h1>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="p-2 hover:bg-surface-container rounded-full text-on-surface-variant transition-colors"><span class="material-symbols-outlined">print</span></button>
|
||||||
|
<button class="p-2 hover:bg-surface-container rounded-full text-on-surface-variant transition-colors"><span class="material-symbols-outlined">delete</span></button>
|
||||||
|
<button class="p-2 hover:bg-surface-container rounded-full text-on-surface-variant transition-colors"><span class="material-symbols-outlined">more_vert</span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<img alt="박진우 본부장" class="w-12 h-12 rounded-full border border-outline-variant object-cover" src="https://lh3.googleusercontent.com/aida/AP1WRLsXFsekmPa77JGx0JMCs31rJ8hCsvn7xGfnRM9YyXX7chbyO5TIB8FjZBm5fuFcHrQrYs35rIMDAjOdQ7L5aS6UTo4NYut5TRziZbF74ZvNWLE74dsJn7t1r9a7q3Ix39o7yZfIRaOTvJrCAHxHopNa-re1XpQvCTPmq8Lv42KQOHH6nzp1ze0UtP0LbreAHgyKKhKyKztA-HxR1EaCG0tF47e0ojeYQQySFKsAjShPLTVV1GHZvv3aQa8"/>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="font-bold text-on-surface text-body-base">박진우 본부장</span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface-variant bg-surface-container px-2 py-0.5 rounded">전시운영팀</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-label-xs font-label-xs text-outline mt-1">2024년 10월 25일 오전 10:45 (받음)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="flex items-center gap-2 px-4 py-2 border border-outline rounded-lg font-label-md text-label-md text-on-surface-variant hover:bg-surface-container-low transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">reply</span>
|
||||||
|
답장
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Message Body -->
|
||||||
|
<div class="flex-1 px-8 py-8 overflow-y-auto text-body-base font-body-base text-on-surface leading-relaxed">
|
||||||
|
<p class="mb-4">안녕하세요, 운영팀의 박진우입니다.</p>
|
||||||
|
<p class="mb-4">내년 개최 예정인 '2026 스마트팩토리 엑스포'의 핵심 전시홀 배치와 관련하여 주요 부스 레이아웃 초안을 전달 드립니다.</p>
|
||||||
|
<p class="mb-4">이번 전시회는 기존보다 참가 기업 수가 15% 가량 증가할 것으로 예상되어, 관람객의 동선 혼잡을 방지하고 주요 글로벌 스폰서 업체들의 전시 공간을 전략적으로 배치하는 것이 관건입니다.</p>
|
||||||
|
<div class="bg-surface-container-low border-l-4 border-primary p-4 mb-4 rounded-r-lg">
|
||||||
|
<p class="font-bold mb-2">검토 요청 사항:</p>
|
||||||
|
<ul class="list-disc pl-5 space-y-1">
|
||||||
|
<li>제1전시장 A-E 구역 대형 부스 전력 공급 용량 확인</li>
|
||||||
|
<li>메인 로비 입구 측 네트워킹 라운지 배치 최적화</li>
|
||||||
|
<li>비상 탈출구 주변 여유 공간(3m 이상) 확보 여부</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<p class="mb-4">첨부된 CAD 도면 파일을 확인해 주시고, 금일 오후 3시 회의 전까지 피드백 주시면 감사하겠습니다.</p>
|
||||||
|
<div class="mt-8 flex gap-4 p-4 border border-outline-variant rounded-xl bg-surface-bright">
|
||||||
|
<div class="w-12 h-12 bg-primary/10 rounded flex items-center justify-center text-primary">
|
||||||
|
<span class="material-symbols-outlined">description</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-bold text-body-sm">2026_SmartFactory_Layout_V1.pdf</p>
|
||||||
|
<p class="text-label-xs text-outline">2.4 MB</p>
|
||||||
|
</div>
|
||||||
|
<button class="text-primary hover:underline font-label-md text-label-md">다운로드</button>
|
||||||
|
</div>
|
||||||
|
<p class="mt-8">감사합니다.<br/>박진우 드림</p>
|
||||||
|
</div>
|
||||||
|
<!-- Message Footer / Reply Area -->
|
||||||
|
<div class="p-6 border-t border-outline-variant bg-surface-container-lowest shadow-[0_-4px_10px_rgba(0,0,0,0.03)]">
|
||||||
|
<div class="border border-outline-variant rounded-xl overflow-hidden focus-within:border-primary transition-all">
|
||||||
|
<textarea class="w-full border-none focus:ring-0 p-4 text-body-base min-h-[100px] resize-none" placeholder="빠른 답장을 입력하세요..."></textarea>
|
||||||
|
<div class="bg-surface-container-low px-4 py-2 flex justify-between items-center">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="p-1.5 hover:bg-surface-variant rounded text-on-surface-variant transition-colors"><span class="material-symbols-outlined text-[20px]">attach_file</span></button>
|
||||||
|
<button class="p-1.5 hover:bg-surface-variant rounded text-on-surface-variant transition-colors"><span class="material-symbols-outlined text-[20px]">image</span></button>
|
||||||
|
<button class="p-1.5 hover:bg-surface-variant rounded text-on-surface-variant transition-colors"><span class="material-symbols-outlined text-[20px]">mood</span></button>
|
||||||
|
</div>
|
||||||
|
<button class="bg-primary text-on-primary px-6 py-2 rounded-lg font-bold text-label-md shadow-sm hover:shadow-md transition-all active:scale-95">답장 보내기</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<!-- Floating Atmosphere Elements -->
|
||||||
|
<div class="fixed bottom-6 right-6 z-50">
|
||||||
|
<button class="w-14 h-14 bg-secondary text-on-secondary rounded-full flex items-center justify-center shadow-xl hover:scale-110 active:scale-90 transition-all">
|
||||||
|
<span class="material-symbols-outlined text-[28px]">support_agent</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
// Simple micro-interaction for marking messages as read or changing state
|
||||||
|
document.querySelectorAll('.cursor-pointer').forEach(item => {
|
||||||
|
item.addEventListener('click', function() {
|
||||||
|
// Remove active class from all
|
||||||
|
document.querySelectorAll('.cursor-pointer').forEach(el => el.classList.remove('message-active'));
|
||||||
|
// Add to clicked
|
||||||
|
this.classList.add('message-active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
431
stitch_kintex_ai_system_architect/scr_42_notice/code.html
Normal file
431
stitch_kintex_ai_system_architect/scr_42_notice/code.html
Normal file
@ -0,0 +1,431 @@
|
|||||||
|
<!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 AI - 공지사항</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@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"/>
|
||||||
|
<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": {
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"outline-variant": "#c2c7d1",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"primary": "#003765", /* Adjusted to KINTEX Blue #0066B3 context via primary scale */
|
||||||
|
"kintex-blue": "#0066B3",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"outline": "#727781",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"inverse-on-surface": "#eef0ff"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"base": "4px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"label-xs": ["Geist"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.line-icon-style {
|
||||||
|
font-variation-settings: 'wght' 300, 'opsz' 20;
|
||||||
|
}
|
||||||
|
.zebra-table tr:nth-child(even) {
|
||||||
|
background-color: #f8fafc;
|
||||||
|
}
|
||||||
|
.notice-row:hover {
|
||||||
|
background-color: #f1f5f9 !important;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
-webkit-backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-background font-body-base overflow-hidden">
|
||||||
|
<!-- Shell Layout: SideNav -->
|
||||||
|
<aside class="fixed left-0 top-0 bottom-0 flex flex-col z-40 w-64 bg-primary text-on-primary shadow-lg">
|
||||||
|
<div class="p-6 flex flex-col gap-1">
|
||||||
|
<h1 class="text-title-sm font-title-sm font-bold text-on-primary">KINTEX AI</h1>
|
||||||
|
<p class="text-label-md font-label-md opacity-80">전시관리 시스템</p>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 mt-4 overflow-y-auto px-2">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<!-- Dashboard -->
|
||||||
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors active:scale-95 duration-150" href="#">
|
||||||
|
<span class="material-symbols-outlined line-icon-style">dashboard</span>
|
||||||
|
<span class="text-label-md font-label-md">대시보드</span>
|
||||||
|
</a>
|
||||||
|
<!-- Notice Board - ACTIVE -->
|
||||||
|
<a class="bg-primary-container text-on-primary-container rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 active:scale-95 transition-all duration-150 shadow-sm" href="#">
|
||||||
|
<span class="material-symbols-outlined line-icon-style">campaign</span>
|
||||||
|
<span class="text-label-md font-label-md">공지사항</span>
|
||||||
|
</a>
|
||||||
|
<!-- Exhibition Management -->
|
||||||
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors active:scale-95 duration-150" href="#">
|
||||||
|
<span class="material-symbols-outlined line-icon-style">event</span>
|
||||||
|
<span class="text-label-md font-label-md">전시 관리</span>
|
||||||
|
</a>
|
||||||
|
<!-- User Management -->
|
||||||
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors active:scale-95 duration-150" href="#">
|
||||||
|
<span class="material-symbols-outlined line-icon-style">group</span>
|
||||||
|
<span class="text-label-md font-label-md">사용자 관리</span>
|
||||||
|
</a>
|
||||||
|
<!-- Device Monitoring -->
|
||||||
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors active:scale-95 duration-150" href="#">
|
||||||
|
<span class="material-symbols-outlined line-icon-style">router</span>
|
||||||
|
<span class="text-label-md font-label-md">기기 모니터링</span>
|
||||||
|
</a>
|
||||||
|
<!-- Statistics -->
|
||||||
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors active:scale-95 duration-150" href="#">
|
||||||
|
<span class="material-symbols-outlined line-icon-style">analytics</span>
|
||||||
|
<span class="text-label-md font-label-md">통계 분석</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div class="p-4 border-t border-on-primary/10">
|
||||||
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined line-icon-style">settings</span>
|
||||||
|
<span class="text-label-md font-label-md">설정</span>
|
||||||
|
</a>
|
||||||
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined line-icon-style">logout</span>
|
||||||
|
<span class="text-label-md font-label-md">로그아웃</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Shell Layout: TopAppBar -->
|
||||||
|
<header class="fixed top-0 right-0 left-64 h-16 flex justify-between items-center px-6 z-30 bg-surface-bright border-b border-outline-variant">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="text-primary font-bold text-headline-md tracking-tight">KINTEX AI 전시관리</span>
|
||||||
|
<div class="h-4 w-px bg-outline-variant mx-2"></div>
|
||||||
|
<nav class="flex gap-4 text-label-md font-label-md text-on-surface-variant">
|
||||||
|
<span class="text-primary font-bold">공지사항</span>
|
||||||
|
<span class="hover:text-primary cursor-pointer transition-colors">시스템 공지</span>
|
||||||
|
<span class="hover:text-primary cursor-pointer transition-colors">운영 매뉴얼</span>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="relative group">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant p-2 rounded-full hover:bg-surface-container cursor-pointer transition-all">notifications</span>
|
||||||
|
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-error rounded-full border border-surface-bright"></span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 pl-4 border-l border-outline-variant">
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-label-md font-label-md text-on-surface">김관리 팀장</p>
|
||||||
|
<p class="text-label-xs font-label-xs text-on-surface-variant opacity-70">시스템 관리자</p>
|
||||||
|
</div>
|
||||||
|
<img class="w-10 h-10 rounded-full border border-outline-variant object-cover" data-alt="A professional close-up studio portrait of a corporate administrator in a modern office environment. The person is wearing a clean, dark blue business suit, looking directly at the camera with a friendly and professional expression. The background is a soft, blurred office interior with high-end glass partitions and soft warm lighting that complements the clean-tech aesthetic of the UI. Professional lighting enhances facial features for a high-quality ID photo look." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBCwgHgvXoIPTXdvHcKYEuVvZzyTlo9T2gHNmT0t5TWrCgL5CcjgfaNEyL7yche1I2KzpojxaOnEqrlZBN__AIsjKXdXyaL-Csq33S2UiM3K-0G8vh9G546xErV2yjjlvUAdeFHCVOUq9KvaNDMdW5HFPs_6LXLEnnDswWa7fm0FygwICMSrcjZXbqN6p0bVx2EBNq2Qbf7FW8WeqSLdxBrmSUykRwldbchl93pY9aaFIjpz_131bSXf30hTknmSvjXUfz8VULNffY"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Content Canvas -->
|
||||||
|
<main class="ml-64 pt-16 h-screen overflow-y-auto">
|
||||||
|
<div class="max-w-[1280px] mx-auto p-12 space-y-8">
|
||||||
|
<!-- Page Header Section -->
|
||||||
|
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-display-lg font-display-lg text-primary">공지사항</h2>
|
||||||
|
<p class="text-body-base text-on-surface-variant mt-2">KINTEX AI 전시관리 시스템의 새로운 소식과 주요 안내사항을 확인하세요.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<div class="relative min-w-[320px]">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
||||||
|
<input class="w-full pl-10 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-full text-body-base focus:ring-2 focus:ring-kintex-blue/20 focus:border-kintex-blue transition-all outline-none" placeholder="공지 제목 또는 내용 검색" type="text"/>
|
||||||
|
</div>
|
||||||
|
<button class="bg-kintex-blue text-on-primary px-6 py-2 rounded-full font-label-md text-label-md hover:bg-primary transition-all shadow-sm flex items-center gap-2 active:scale-95">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">add</span>
|
||||||
|
공지 작성
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Pinned Notice Section -->
|
||||||
|
<div class="relative overflow-hidden rounded-xl border-l-4 border-error bg-surface-container-lowest shadow-md p-6 hover:shadow-lg transition-shadow cursor-pointer group">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="bg-error text-white text-label-xs font-label-xs px-2 py-0.5 rounded uppercase tracking-wider">중요</span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface-variant">운영 가이드라인</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-title-sm font-title-sm text-on-surface group-hover:text-kintex-blue transition-colors">
|
||||||
|
중요: 2026 스마트팩토리 엑스포 운영 규정 변경 안내
|
||||||
|
</h3>
|
||||||
|
<p class="text-body-sm text-on-surface-variant line-clamp-1 opacity-80">
|
||||||
|
내년도 개최 예정인 스마트팩토리 엑스포의 전시관 배치 및 안전 관리 규정이 강화됨에 따라 주요 변경 사항을 공지합니다. 전시 업체 및 관리자 분들께서는 반드시 숙지 부탁드립니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-right whitespace-nowrap pl-8">
|
||||||
|
<p class="text-label-md font-label-md text-on-surface">관리본부</p>
|
||||||
|
<p class="text-label-xs font-label-xs text-on-surface-variant mt-1">2023.10.27</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Glassy Highlight Decorative -->
|
||||||
|
<div class="absolute -right-8 -bottom-8 w-24 h-24 bg-error/5 rounded-full blur-2xl"></div>
|
||||||
|
</div>
|
||||||
|
<!-- Notice List Table Container -->
|
||||||
|
<div class="bg-surface-container-lowest rounded-xl border border-outline-variant overflow-hidden shadow-sm">
|
||||||
|
<table class="w-full text-left border-collapse zebra-table">
|
||||||
|
<thead>
|
||||||
|
<tr class="bg-surface-container text-on-surface-variant text-label-md font-label-md uppercase tracking-wider">
|
||||||
|
<th class="px-6 py-4 w-16 text-center">번호</th>
|
||||||
|
<th class="px-6 py-4">제목</th>
|
||||||
|
<th class="px-6 py-4 w-32">작성자</th>
|
||||||
|
<th class="px-6 py-4 w-32">게시일</th>
|
||||||
|
<th class="px-6 py-4 w-24 text-center">조회수</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="text-body-base">
|
||||||
|
<!-- Row 1 -->
|
||||||
|
<tr class="notice-row border-b border-outline-variant/30" onclick="openNoticeModal()">
|
||||||
|
<td class="px-6 py-5 text-center text-on-surface-variant">42</td>
|
||||||
|
<td class="px-6 py-5">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-on-surface font-medium">제 2전시장 AI 통합 관제 시스템 점검 공지</span>
|
||||||
|
<span class="material-symbols-outlined text-[16px] text-outline">attach_file</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-5 text-on-surface-variant">시스템운영팀</td>
|
||||||
|
<td class="px-6 py-5 text-on-surface-variant">2023.10.25</td>
|
||||||
|
<td class="px-6 py-5 text-center text-on-surface-variant">1,204</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 2 -->
|
||||||
|
<tr class="notice-row border-b border-outline-variant/30">
|
||||||
|
<td class="px-6 py-5 text-center text-on-surface-variant">41</td>
|
||||||
|
<td class="px-6 py-5">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-on-surface">KINTEX 멤버십 서비스 혜택 변경 안내 (11월부터 적용)</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-5 text-on-surface-variant">전략마케팅팀</td>
|
||||||
|
<td class="px-6 py-5 text-on-surface-variant">2023.10.22</td>
|
||||||
|
<td class="px-6 py-5 text-center text-on-surface-variant">856</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 3 -->
|
||||||
|
<tr class="notice-row border-b border-outline-variant/30">
|
||||||
|
<td class="px-6 py-5 text-center text-on-surface-variant">40</td>
|
||||||
|
<td class="px-6 py-5">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-on-surface">전시 참관객 데이터 분석 리포트 업데이트 완료 (Q3)</span>
|
||||||
|
<span class="material-symbols-outlined text-[16px] text-outline">attach_file</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-5 text-on-surface-variant">데이터분석실</td>
|
||||||
|
<td class="px-6 py-5 text-on-surface-variant">2023.10.18</td>
|
||||||
|
<td class="px-6 py-5 text-center text-on-surface-variant">2,311</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 4 -->
|
||||||
|
<tr class="notice-row border-b border-outline-variant/30">
|
||||||
|
<td class="px-6 py-5 text-center text-on-surface-variant">39</td>
|
||||||
|
<td class="px-6 py-5 text-on-surface">하반기 신규 전시 제안서 접수 기간 연장 알림</td>
|
||||||
|
<td class="px-6 py-5 text-on-surface-variant">기획사업본부</td>
|
||||||
|
<td class="px-6 py-5 text-on-surface-variant">2023.10.15</td>
|
||||||
|
<td class="px-6 py-5 text-center text-on-surface-variant">542</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 5 -->
|
||||||
|
<tr class="notice-row border-b border-outline-variant/30">
|
||||||
|
<td class="px-6 py-5 text-center text-on-surface-variant">38</td>
|
||||||
|
<td class="px-6 py-5 text-on-surface">추석 연휴 기간 시스템 고객지원 센터 운영 시간 안내</td>
|
||||||
|
<td class="px-6 py-5 text-on-surface-variant">운영본부</td>
|
||||||
|
<td class="px-6 py-5 text-on-surface-variant">2023.09.25</td>
|
||||||
|
<td class="px-6 py-5 text-center text-on-surface-variant">1,098</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div class="px-6 py-4 bg-surface-container-lowest flex justify-between items-center border-t border-outline-variant/30">
|
||||||
|
<p class="text-label-md font-label-md text-on-surface-variant">전체 1,242개의 항목 중 1-5 표시</p>
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<button class="p-2 rounded hover:bg-surface-container-low text-on-surface-variant"><span class="material-symbols-outlined">chevron_left</span></button>
|
||||||
|
<button class="w-8 h-8 rounded flex items-center justify-center bg-kintex-blue text-white font-label-md text-label-md">1</button>
|
||||||
|
<button class="w-8 h-8 rounded flex items-center justify-center hover:bg-surface-container-low text-on-surface-variant font-label-md text-label-md">2</button>
|
||||||
|
<button class="w-8 h-8 rounded flex items-center justify-center hover:bg-surface-container-low text-on-surface-variant font-label-md text-label-md">3</button>
|
||||||
|
<button class="w-8 h-8 rounded flex items-center justify-center hover:bg-surface-container-low text-on-surface-variant font-label-md text-label-md">4</button>
|
||||||
|
<button class="w-8 h-8 rounded flex items-center justify-center hover:bg-surface-container-low text-on-surface-variant font-label-md text-label-md">5</button>
|
||||||
|
<button class="p-2 rounded hover:bg-surface-container-low text-on-surface-variant"><span class="material-symbols-outlined">chevron_right</span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Detail View Modal (Glassmorphism Overlay) -->
|
||||||
|
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm hidden opacity-0 transition-opacity duration-300" id="noticeModal">
|
||||||
|
<div class="bg-surface-container-lowest w-full max-w-3xl max-h-[921px] rounded-2xl shadow-2xl overflow-hidden flex flex-col transform scale-95 transition-transform duration-300">
|
||||||
|
<!-- Modal Header -->
|
||||||
|
<div class="px-8 py-6 border-b border-outline-variant flex justify-between items-start">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="bg-primary-fixed text-on-primary-fixed-variant text-label-xs font-label-xs px-2 py-0.5 rounded">점검안내</span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface-variant">No. 42</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-headline-md font-headline-md text-on-surface">제 2전시장 AI 통합 관제 시스템 점검 공지</h3>
|
||||||
|
</div>
|
||||||
|
<button class="p-2 hover:bg-surface-container rounded-full transition-colors" onclick="closeNoticeModal()">
|
||||||
|
<span class="material-symbols-outlined">close</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Modal Meta Info -->
|
||||||
|
<div class="px-8 py-4 bg-surface-container-low flex gap-8">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant uppercase opacity-60">작성자</span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface">시스템운영팀</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 border-l border-outline-variant pl-8">
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant uppercase opacity-60">등록일</span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface">2023.10.25 14:30</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 border-l border-outline-variant pl-8">
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant uppercase opacity-60">조회수</span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface">1,204</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Modal Body Content -->
|
||||||
|
<div class="px-8 py-8 flex-1 overflow-y-auto space-y-6">
|
||||||
|
<div class="text-body-base text-on-surface space-y-4 leading-relaxed">
|
||||||
|
<p>안녕하세요. KINTEX AI 전시관리 시스템 운영팀입니다.</p>
|
||||||
|
<p>시스템 안정성 강화 및 안정적인 서비스 제공을 위해 아래와 같이 제 2전시장 AI 통합 관제 시스템의 정기 점검이 진행될 예정입니다. 점검 시간 동안 해당 지역의 실시간 모니터링 기능이 일시적으로 제한될 수 있으니 운영에 참고하여 주시기 바랍니다.</p>
|
||||||
|
<div class="bg-surface-container-low p-5 rounded-lg border border-outline-variant/50 space-y-2">
|
||||||
|
<p class="font-bold">1. 점검 일시</p>
|
||||||
|
<p>• 2023년 11월 01일 (수) 02:00 ~ 05:00 (약 3시간)</p>
|
||||||
|
<p class="font-bold mt-4">2. 점검 대상</p>
|
||||||
|
<p>• 제 2전시장 전 구역 AI 카메라 및 데이터 허브</p>
|
||||||
|
<p class="font-bold mt-4">3. 점검 영향</p>
|
||||||
|
<p>• 점검 중 실시간 군중 밀집도 데이터 업데이트 지연</p>
|
||||||
|
<p>• 시스템 대시보드 내 특정 위젯 로딩 불가</p>
|
||||||
|
</div>
|
||||||
|
<p>이와 관련하여 문의사항이 있으시면 시스템운영팀(내선 104)으로 연락 주시기 바랍니다. 더 나은 서비스를 제공하기 위해 노력하겠습니다. 감사합니다.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Attachments Section -->
|
||||||
|
<div class="pt-6 border-t border-outline-variant">
|
||||||
|
<h4 class="text-label-md font-label-md text-on-surface mb-3 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">attach_file</span>
|
||||||
|
첨부파일 (1)
|
||||||
|
</h4>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 bg-surface-container-low border border-outline-variant rounded-lg hover:border-kintex-blue hover:bg-white cursor-pointer transition-all group">
|
||||||
|
<span class="material-symbols-outlined text-kintex-blue">picture_as_pdf</span>
|
||||||
|
<div>
|
||||||
|
<p class="text-label-md font-label-md text-on-surface">점검 상세 매뉴얼.pdf</p>
|
||||||
|
<p class="text-label-xs font-label-xs text-on-surface-variant opacity-60">2.4 MB</p>
|
||||||
|
</div>
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-kintex-blue opacity-0 group-hover:opacity-100 transition-opacity ml-4">download</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Modal Footer -->
|
||||||
|
<div class="px-8 py-5 border-t border-outline-variant flex justify-end gap-3 bg-surface-container-lowest">
|
||||||
|
<button class="px-6 py-2 border border-outline-variant text-on-surface-variant rounded-lg font-label-md hover:bg-surface-container transition-all" onclick="closeNoticeModal()">닫기</button>
|
||||||
|
<button class="px-6 py-2 bg-kintex-blue text-white rounded-lg font-label-md hover:bg-primary transition-all shadow-sm">수정하기</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
function openNoticeModal() {
|
||||||
|
const modal = document.getElementById('noticeModal');
|
||||||
|
const inner = modal.querySelector('div');
|
||||||
|
modal.classList.remove('hidden');
|
||||||
|
setTimeout(() => {
|
||||||
|
modal.classList.remove('opacity-0');
|
||||||
|
inner.classList.remove('scale-95');
|
||||||
|
inner.classList.add('scale-100');
|
||||||
|
}, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeNoticeModal() {
|
||||||
|
const modal = document.getElementById('noticeModal');
|
||||||
|
const inner = modal.querySelector('div');
|
||||||
|
modal.classList.add('opacity-0');
|
||||||
|
inner.classList.add('scale-95');
|
||||||
|
inner.classList.remove('scale-100');
|
||||||
|
setTimeout(() => {
|
||||||
|
modal.classList.add('hidden');
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close modal on escape key
|
||||||
|
document.addEventListener('keydown', function(event) {
|
||||||
|
if (event.key === "Escape") {
|
||||||
|
closeNoticeModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close modal on backdrop click
|
||||||
|
document.getElementById('noticeModal').addEventListener('click', function(event) {
|
||||||
|
if (event.target === this) {
|
||||||
|
closeNoticeModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
481
stitch_kintex_ai_system_architect/scr_43_opinion/code.html
Normal file
481
stitch_kintex_ai_system_architect/scr_43_opinion/code.html
Normal file
@ -0,0 +1,481 @@
|
|||||||
|
<!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 AI 전시관리 시스템</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@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"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<!-- Tailwind Configuration -->
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"outline": "#727781",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"primary": "#003765",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"error-red": "#ba1a1a"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"section-padding": "96px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"base": "4px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"display-lg-mobile": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: #faf8ff;
|
||||||
|
color: #141b2c;
|
||||||
|
}
|
||||||
|
.bento-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(12, 1fr);
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
.form-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #c1c7d3;
|
||||||
|
border-left: 4px solid #003765;
|
||||||
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
.form-card:hover {
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 55, 101, 0.08);
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: #c1c7d3;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.ai-response-blob {
|
||||||
|
background: linear-gradient(135deg, #f2f3ff 0%, #eef0ff 100%);
|
||||||
|
border: 1px solid #dbe2fa;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.ai-response-blob::before {
|
||||||
|
content: 'AI-Powered';
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
right: 16px;
|
||||||
|
background: #6d4aff;
|
||||||
|
color: white;
|
||||||
|
font-size: 10px;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="font-body-base overflow-x-hidden">
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<aside class="bg-surface-container-low dark:bg-surface-container-low h-full w-64 fixed left-0 top-0 border-r border-outline-variant flex flex-col py-6 z-50">
|
||||||
|
<div class="px-6 mb-8">
|
||||||
|
<h1 class="font-display-lg text-display-lg font-bold text-primary dark:text-primary-fixed">KINTEX AI</h1>
|
||||||
|
<p class="text-on-surface-variant text-label-md mt-1">전시관리 시스템</p>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 px-3 space-y-1 overflow-y-auto custom-scrollbar">
|
||||||
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors font-label-md rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3" data-icon="dashboard">dashboard</span>
|
||||||
|
<span>대시보드</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors font-label-md rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3" data-icon="event">event</span>
|
||||||
|
<span>전시 관리</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors font-label-md rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3" data-icon="group">group</span>
|
||||||
|
<span>사용자 관리</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors font-label-md rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3" data-icon="sensors">sensors</span>
|
||||||
|
<span>기기 모니터링</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors font-label-md rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3" data-icon="leaderboard">leaderboard</span>
|
||||||
|
<span>통계 분석</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-4 py-3 bg-secondary-container text-on-secondary-container font-bold border-l-4 border-secondary font-label-md rounded-r-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3" data-icon="rate_review">rate_review</span>
|
||||||
|
<span>의견접수</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors font-label-md rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3" data-icon="history">history</span>
|
||||||
|
<span>감사 로그</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="px-3 pt-4 border-t border-outline-variant mt-4">
|
||||||
|
<a class="flex items-center px-4 py-2 text-on-surface-variant hover:bg-surface-container-high transition-colors font-label-md rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3" data-icon="settings">settings</span>
|
||||||
|
<span>설정</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-4 py-2 text-on-surface-variant hover:bg-surface-container-high transition-colors font-label-md rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3" data-icon="help">help</span>
|
||||||
|
<span>도움말</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-4 py-2 text-error hover:bg-error-container transition-colors font-label-md rounded-lg mt-2" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3" data-icon="logout">logout</span>
|
||||||
|
<span>로그아웃</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<main class="ml-64 flex flex-col min-h-screen">
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="bg-surface dark:bg-surface flex justify-between items-center px-container-padding h-16 border-b border-outline-variant sticky top-0 z-40">
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<span class="font-headline-md text-headline-md font-bold text-on-surface">의견접수</span>
|
||||||
|
<div class="h-4 w-px bg-outline-variant"></div>
|
||||||
|
<span class="text-on-surface-variant font-body-sm">KINTEX AI 전시관리</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-6">
|
||||||
|
<div class="relative flex items-center bg-surface-container-low rounded-full px-4 py-2 border border-outline-variant">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant mr-2" style="font-size: 20px;">search</span>
|
||||||
|
<input class="bg-transparent border-none focus:ring-0 text-sm w-48 font-body-sm" placeholder="검색어를 입력하세요..." type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-3">
|
||||||
|
<button class="material-symbols-outlined p-2 text-on-surface-variant hover:bg-surface-container-high rounded-full transition-all" data-icon="notifications">notifications</button>
|
||||||
|
<button class="material-symbols-outlined p-2 text-on-surface-variant hover:bg-surface-container-high rounded-full transition-all" data-icon="settings">settings</button>
|
||||||
|
<div class="flex items-center space-x-2 pl-4 border-l border-outline-variant">
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-label-md font-bold text-on-surface">관리자 01</p>
|
||||||
|
<p class="text-label-xs text-on-surface-variant">운영지원팀</p>
|
||||||
|
</div>
|
||||||
|
<img class="w-8 h-8 rounded-full border border-outline-variant" data-alt="A clean, professional headshot of a corporate administrator in a modern office environment, high-end photography with soft lighting and a blurred background featuring KINTEX architectural elements." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDXCm1COXIvBx7My6PQfiOj9ze0d3hyswLZwO0ZHMpYnzMbJOqkI5TC4RQASVDzqTigO11GC7W7kzqRlAqE79k71Q0G6yZTl9hg755dOcl5ZK01QOTjMU_QCyfLaUlGpwHFDRL0ocL67_OMV9K-gfYkjPKV-h3OPp_DtGKl7Zu0wyobzbtj0OliFk6M3wgLCf0sBz8AWcrotKBPdc8ct77-IRJ9HNR0I3z4F6vnCrZI2PBlQNoP4XjN_Gs4QqzRFouk8TZSJcArDuo"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Content Canvas -->
|
||||||
|
<div class="flex-1 p-8 max-w-[1280px] mx-auto w-full">
|
||||||
|
<!-- Header Section -->
|
||||||
|
<section class="mb-12">
|
||||||
|
<h2 class="font-display-lg text-display-lg text-primary mb-2">의견 및 제안 접수</h2>
|
||||||
|
<p class="text-on-surface-variant font-title-sm">시스템 개선 및 현장 운영 효율화를 위한 소중한 의견을 남겨주세요.</p>
|
||||||
|
</section>
|
||||||
|
<!-- Submission Form (Bento Style) -->
|
||||||
|
<div class="bento-grid mb-16">
|
||||||
|
<div class="col-span-12 lg:col-span-8">
|
||||||
|
<div class="form-card rounded-xl p-8 h-full">
|
||||||
|
<h3 class="font-title-sm text-primary mb-6 flex items-center">
|
||||||
|
<span class="material-symbols-outlined mr-2" data-icon="edit_note">edit_note</span>
|
||||||
|
의견 작성
|
||||||
|
</h3>
|
||||||
|
<form class="space-y-6">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label class="block text-label-md text-on-surface-variant mb-2">접수 카테고리</label>
|
||||||
|
<select class="w-full bg-surface-container-low border-outline-variant rounded-lg focus:border-primary focus:ring-primary text-body-base">
|
||||||
|
<option>카테고리를 선택하세요</option>
|
||||||
|
<option>규정 문의</option>
|
||||||
|
<option>개선 제안</option>
|
||||||
|
<option>불편 신고</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-label-md text-on-surface-variant mb-2">담당 부서</label>
|
||||||
|
<input class="w-full bg-surface-container rounded-lg border-outline-variant text-on-surface-variant opacity-70 text-body-base" readonly="" type="text" value="운영지원팀 (자동지정)"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-label-md text-on-surface-variant mb-2">제목</label>
|
||||||
|
<input class="w-full bg-surface-container-low border-outline-variant rounded-lg focus:border-primary focus:ring-primary text-body-base" placeholder="의견을 잘 나타낼 수 있는 제목을 입력해주세요" type="text"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-label-md text-on-surface-variant mb-2">내용</label>
|
||||||
|
<textarea class="w-full bg-surface-container-low border-outline-variant rounded-lg focus:border-primary focus:ring-primary text-body-base" placeholder="개선 사항이나 건의 내용을 구체적으로 기술해 주시면 빠른 검토가 가능합니다." rows="6"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between pt-4">
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<button class="flex items-center px-4 py-2 border border-outline-variant text-on-surface-variant rounded-lg hover:bg-surface-container-high transition-colors font-label-md" type="button">
|
||||||
|
<span class="material-symbols-outlined mr-2" data-icon="attach_file" style="font-size: 18px;">attach_file</span>
|
||||||
|
파일 첨부
|
||||||
|
</button>
|
||||||
|
<span class="text-label-xs text-on-surface-variant flex items-center">최대 20MB (JPG, PNG, PDF 가능)</span>
|
||||||
|
</div>
|
||||||
|
<button class="bg-primary text-on-primary px-10 py-3 rounded-lg font-bold hover:bg-primary-container transition-all flex items-center shadow-md" type="submit">
|
||||||
|
<span class="material-symbols-outlined mr-2" data-icon="send">send</span>
|
||||||
|
제출하기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Info Sidebar (Bento Extra) -->
|
||||||
|
<div class="col-span-12 lg:col-span-4 space-y-6">
|
||||||
|
<div class="bg-secondary-container text-on-secondary-container rounded-xl p-6 shadow-sm border border-secondary">
|
||||||
|
<h4 class="font-title-sm mb-4 flex items-center">
|
||||||
|
<span class="material-symbols-outlined mr-2" data-icon="info">info</span>
|
||||||
|
처리 프로세스
|
||||||
|
</h4>
|
||||||
|
<ul class="space-y-4 text-label-md">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="bg-on-secondary-container text-secondary px-2 py-0.5 rounded mr-3 font-bold">01</span>
|
||||||
|
<span>의견 접수 후 담당 부서에서 즉시 확인 프로세스가 시작됩니다.</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="bg-on-secondary-container text-secondary px-2 py-0.5 rounded mr-3 font-bold">02</span>
|
||||||
|
<span>접수된 제안은 내부 검토를 거쳐 시스템 고도화에 반영됩니다.</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="bg-on-secondary-container text-secondary px-2 py-0.5 rounded mr-3 font-bold">03</span>
|
||||||
|
<span>처리 결과는 최대 3영업일 이내에 답변을 드립니다.</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-6">
|
||||||
|
<h4 class="font-title-sm text-on-surface mb-4">자주 묻는 질문</h4>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<a class="block p-3 rounded-lg hover:bg-surface-container-low transition-colors border border-transparent hover:border-outline-variant group" href="#">
|
||||||
|
<p class="text-label-md font-bold group-hover:text-primary">시스템 권한 신청 방법은?</p>
|
||||||
|
<p class="text-label-xs text-on-surface-variant mt-1">로그인 후 설정 > 권한 탭에서 가능합니다.</p>
|
||||||
|
</a>
|
||||||
|
<a class="block p-3 rounded-lg hover:bg-surface-container-low transition-colors border border-transparent hover:border-outline-variant group" href="#">
|
||||||
|
<p class="text-label-md font-bold group-hover:text-primary">실시간 데이터 갱신 주기</p>
|
||||||
|
<p class="text-label-xs text-on-surface-variant mt-1">센서 데이터는 5초 간격으로 갱신됩니다.</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- My Submissions List Section -->
|
||||||
|
<section>
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface">나의 문의 내역</h3>
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<button class="px-3 py-1 bg-surface-container-high rounded-full text-label-xs font-bold text-on-surface">전체</button>
|
||||||
|
<button class="px-3 py-1 text-label-xs font-bold text-on-surface-variant hover:bg-surface-container-low rounded-full">답변완료</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest rounded-xl border border-outline-variant overflow-hidden">
|
||||||
|
<table class="w-full text-left border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr class="bg-surface-container-low border-b border-outline-variant">
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant">카테고리</th>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant">제목</th>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant">접수일시</th>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant">상태</th>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant text-right">관리</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-outline-variant">
|
||||||
|
<!-- Item 1 (Expanded Example) -->
|
||||||
|
<tr class="hover:bg-surface-container transition-colors cursor-pointer group" onclick="toggleRow('row1')">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="text-primary-container bg-primary-fixed px-2 py-1 rounded text-label-xs">개선 제안</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 font-body-base font-medium">제1전시장 로비 키오스크 UI 반응 속도 개선 요청</td>
|
||||||
|
<td class="px-6 py-4 text-label-md text-on-surface-variant">2024.11.20 14:30</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="px-2 py-1 bg-tertiary-fixed text-on-tertiary-fixed rounded-full text-label-xs font-bold">답변완료</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-right">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-transform" data-icon="expand_more" id="icon-row1">expand_more</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hidden bg-surface-container-low transition-all" id="row1">
|
||||||
|
<td class="px-12 py-6" colspan="5">
|
||||||
|
<div class="flex flex-col space-y-4">
|
||||||
|
<div class="bg-surface-container-lowest p-4 rounded-lg border border-outline-variant">
|
||||||
|
<p class="text-label-xs font-bold text-primary mb-1 uppercase">문의 내용</p>
|
||||||
|
<p class="text-body-base text-on-surface">제1전시장 입구에 위치한 무인 키오스크에서 데이터 로딩 시 약 3초간의 딜레이가 발생합니다. 관람객 몰리는 시간대에 병목 현상이 예상되니 최적화 부탁드립니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="ai-response-blob p-6 rounded-xl shadow-sm">
|
||||||
|
<div class="flex items-center mb-3">
|
||||||
|
<span class="material-symbols-outlined text-secondary mr-2" data-icon="smart_toy" style="font-size: 20px;">smart_toy</span>
|
||||||
|
<p class="text-label-md font-bold text-secondary">AI 요약 및 담당자 답변</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<p class="text-body-base text-on-surface leading-relaxed">
|
||||||
|
안녕하세요. KINTEX AI 운영지원팀입니다. 제안해주신 키오스크 지연 문제는 현재 API 응답 캐싱 최적화 작업을 통해 0.5초 이내로 단축하는 업데이트가 차주 화요일 배포 예정입니다. 적극적인 의견 감사드립니다.
|
||||||
|
</p>
|
||||||
|
<div class="pt-2 border-t border-outline-variant/30 text-label-xs text-on-surface-variant italic">
|
||||||
|
이 답변은 AI 기술 지원을 통해 신속하게 생성되었으며 운영 책임자의 검토를 마쳤습니다.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Item 2 -->
|
||||||
|
<tr class="hover:bg-surface-container transition-colors cursor-pointer group" onclick="toggleRow('row2')">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="text-on-secondary-fixed-variant bg-secondary-fixed px-2 py-1 rounded text-label-xs">불편 신고</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 font-body-base font-medium">관리자 대시보드 모바일 뷰 깨짐 현상</td>
|
||||||
|
<td class="px-6 py-4 text-label-md text-on-surface-variant">2024.11.22 09:15</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="px-2 py-1 bg-primary-fixed text-primary rounded-full text-label-xs font-bold">검토중</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-right">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant" data-icon="expand_more" id="icon-row2">expand_more</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hidden bg-surface-container-low" id="row2">
|
||||||
|
<td class="px-12 py-6" colspan="5">
|
||||||
|
<div class="p-4 bg-surface-container-lowest rounded-lg border border-outline-variant">
|
||||||
|
<p class="text-body-base text-on-surface">아이폰 15 프로 환경에서 대시보드 그래프가 영역을 벗어나 표시됩니다. 긴급 수정 부탁드립니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 flex items-center text-primary font-bold text-label-md">
|
||||||
|
<span class="material-symbols-outlined mr-2" data-icon="pending">pending</span>
|
||||||
|
담당 부서에서 해당 기기를 통해 재현 테스트 중입니다.
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Item 3 -->
|
||||||
|
<tr class="hover:bg-surface-container transition-colors cursor-pointer group">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="text-on-surface-variant bg-surface-container-high px-2 py-1 rounded text-label-xs">규정 문의</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 font-body-base font-medium">야간 연장 운영 시 보안 인력 배치 기준</td>
|
||||||
|
<td class="px-6 py-4 text-label-md text-on-surface-variant">2024.11.23 11:00</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="px-2 py-1 bg-outline-variant text-on-surface-variant rounded-full text-label-xs font-bold">접수</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-right">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant" data-icon="expand_more">expand_more</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6 flex justify-center">
|
||||||
|
<nav class="flex items-center space-x-2">
|
||||||
|
<button class="p-2 rounded-lg hover:bg-surface-container-high transition-colors"><span class="material-symbols-outlined" data-icon="chevron_left">chevron_left</span></button>
|
||||||
|
<button class="w-8 h-8 rounded-lg bg-primary text-on-primary font-bold text-label-md">1</button>
|
||||||
|
<button class="w-8 h-8 rounded-lg hover:bg-surface-container-high transition-colors text-label-md">2</button>
|
||||||
|
<button class="w-8 h-8 rounded-lg hover:bg-surface-container-high transition-colors text-label-md">3</button>
|
||||||
|
<button class="p-2 rounded-lg hover:bg-surface-container-high transition-colors"><span class="material-symbols-outlined" data-icon="chevron_right">chevron_right</span></button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-surface-container-lowest dark:bg-surface-container-lowest border-t border-outline-variant flex justify-between items-center px-container-padding py-4 mt-auto">
|
||||||
|
<span class="font-label-xs text-label-xs text-on-surface-variant">© 2024 KINTEX AI 전시관리. All rights reserved.</span>
|
||||||
|
<div class="flex space-x-6">
|
||||||
|
<a class="text-on-surface-variant font-label-xs hover:underline transition-all opacity-80 hover:opacity-100" href="#">Privacy Policy</a>
|
||||||
|
<a class="text-on-surface-variant font-label-xs hover:underline transition-all opacity-80 hover:opacity-100" href="#">Terms of Service</a>
|
||||||
|
<a class="text-on-surface-variant font-label-xs hover:underline transition-all opacity-80 hover:opacity-100" href="#">Contact Support</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
function toggleRow(rowId) {
|
||||||
|
const row = document.getElementById(rowId);
|
||||||
|
const icon = document.getElementById('icon-' + rowId);
|
||||||
|
|
||||||
|
if (row.classList.contains('hidden')) {
|
||||||
|
row.classList.remove('hidden');
|
||||||
|
if(icon) icon.style.transform = 'rotate(180deg)';
|
||||||
|
} else {
|
||||||
|
row.classList.add('hidden');
|
||||||
|
if(icon) icon.style.transform = 'rotate(0deg)';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Micro-interaction for sidebar links
|
||||||
|
const navLinks = document.querySelectorAll('aside nav a');
|
||||||
|
navLinks.forEach(link => {
|
||||||
|
link.addEventListener('click', (e) => {
|
||||||
|
// If it's not the active one, simulate navigation
|
||||||
|
if(!link.classList.contains('bg-secondary-container')) {
|
||||||
|
navLinks.forEach(l => {
|
||||||
|
l.classList.remove('bg-secondary-container', 'text-on-secondary-container', 'font-bold', 'border-l-4', 'border-secondary');
|
||||||
|
l.classList.add('text-on-surface-variant', 'hover:bg-surface-container-high');
|
||||||
|
});
|
||||||
|
link.classList.add('bg-secondary-container', 'text-on-secondary-container', 'font-bold', 'border-l-4', 'border-secondary');
|
||||||
|
link.classList.remove('text-on-surface-variant', 'hover:bg-surface-container-high');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
413
stitch_kintex_ai_system_architect/scr_44_search/code.html
Normal file
413
stitch_kintex_ai_system_architect/scr_44_search/code.html
Normal file
@ -0,0 +1,413 @@
|
|||||||
|
<!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 AI 전시관리 - Unified Global Search</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@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"/>
|
||||||
|
<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": {
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"outline": "#727781",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"primary": "#003765",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"inverse-on-surface": "#eef0ff"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"gutter": "16px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"display-lg-mobile": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"title-sm": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"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"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.search-highlight {
|
||||||
|
color: #004E8B;
|
||||||
|
font-weight: 700;
|
||||||
|
background-color: #d3e4ff;
|
||||||
|
padding: 0 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.ai-glow {
|
||||||
|
box-shadow: 0 0 15px rgba(109, 74, 255, 0.2);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #faf8ff;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #c1c7d3;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-surface font-body-base antialiased">
|
||||||
|
<!-- SideNavBar Anchor -->
|
||||||
|
<aside class="h-screen w-64 fixed left-0 top-0 flex flex-col bg-surface-container dark:bg-inverse-surface border-r border-outline-variant dark:border-outline z-50">
|
||||||
|
<div class="flex flex-col h-full py-container-padding">
|
||||||
|
<div class="px-6 mb-8 flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 bg-primary rounded flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-white text-lg">corporate_fare</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="text-title-sm font-title-sm text-primary dark:text-primary-fixed-dim font-bold">KINTEX Admin</h1>
|
||||||
|
<p class="text-label-xs font-label-xs text-on-surface-variant">Enterprise Manager</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 space-y-1 px-4 overflow-y-auto">
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-surface-variant font-body-base hover:bg-surface-container-high dark:hover:bg-surface-container-highest transition-colors rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span>Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-surface-variant font-body-base hover:bg-surface-container-high dark:hover:bg-surface-container-highest transition-colors rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined">calendar_month</span>
|
||||||
|
<span>Exhibition Schedule</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-primary dark:text-primary-fixed-dim font-bold border-r-4 border-primary dark:border-primary-fixed-dim bg-primary-container/10 rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined">payments</span>
|
||||||
|
<span>Booth Sales</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-surface-variant font-body-base hover:bg-surface-container-high dark:hover:bg-surface-container-highest transition-colors rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined">groups</span>
|
||||||
|
<span>Exhibitor Management</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-surface-variant font-body-base hover:bg-surface-container-high dark:hover:bg-surface-container-highest transition-colors rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span>Settings</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="px-4 mt-auto space-y-1 border-t border-outline-variant pt-6">
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-surface-variant font-body-base hover:bg-surface-container-high dark:hover:bg-surface-container-highest transition-colors rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
<span>Support</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-surface-variant font-body-base hover:bg-surface-container-high dark:hover:bg-surface-container-highest transition-colors rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined">logout</span>
|
||||||
|
<span>Log Out</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- TopNavBar Anchor -->
|
||||||
|
<header class="fixed top-0 right-0 w-[calc(100%-16rem)] h-16 z-40 bg-surface dark:bg-background border-b border-outline-variant dark:border-outline flex items-center justify-between px-gutter">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<h2 class="font-headline-md text-headline-md text-primary dark:text-primary-fixed-dim">Exhibition Manager</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<div class="relative w-96">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
||||||
|
<input class="w-full bg-surface-container-low border border-outline-variant rounded-full py-2 pl-10 pr-4 text-body-base focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all" placeholder="통합 검색..." type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-opacity duration-150 cursor-pointer">notifications</button>
|
||||||
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-opacity duration-150 cursor-pointer">help</button>
|
||||||
|
<div class="w-8 h-8 rounded-full overflow-hidden border border-outline-variant">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="Close-up portrait of a professional corporate administrator with a confident smile, wearing business attire, against a clean studio background with soft cinematic lighting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPtW6A4RdqoDHwUIG5yKCAZlpug3dKLbeG56gHpAjI2YnQu3p9XVbQBjGB_la2A9KvF56SmYDvSuh4pNEZIvp8CGJXiR2DzTT4GmUW1arLLaSYUBC6U1wGQvMNimIuO9Fcv_EsVt-Q52_fMzBTx-rRF4cSygXj3Va6RE0Jroukp3gvOgGoHCa3Ph1wcaKhudQZ7m9BsvIXEPrLhNCT7vb22mIkcS0d1U09M5jBHsS3-8Ouza9pGBbh-xV4-WHg8PGv9VUqlWzL314"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<main class="ml-64 mt-16 p-stack-lg min-h-[calc(100vh-4rem)]">
|
||||||
|
<div class="max-w-7xl mx-auto space-y-stack-lg">
|
||||||
|
<!-- Centered Search Section -->
|
||||||
|
<section class="flex flex-col items-center py-12">
|
||||||
|
<div class="w-full max-w-2xl space-y-6">
|
||||||
|
<div class="relative group">
|
||||||
|
<div class="absolute inset-y-0 left-6 flex items-center pointer-events-none">
|
||||||
|
<span class="material-symbols-outlined text-primary text-2xl">search</span>
|
||||||
|
</div>
|
||||||
|
<input class="block w-full py-6 pl-16 pr-44 text-title-sm font-title-sm bg-white border-2 border-primary/20 rounded-2xl shadow-lg focus:ring-primary focus:border-primary transition-all ai-glow" placeholder="검색어를 입력하세요..." type="text" value="스마트팩토리 2026 부스 배치도"/>
|
||||||
|
<div class="absolute inset-y-3 right-3 flex items-center">
|
||||||
|
<button class="flex items-center gap-2 bg-secondary-container text-on-secondary px-6 rounded-xl font-label-md transition-transform hover:scale-[1.02] active:scale-95 shadow-md">
|
||||||
|
<img alt="AI Sparkle" class="w-5 h-5 invert" src="https://lh3.googleusercontent.com/aida/AP1WRLu1SFz3uW8s6iC8BUAS9XvAFoM_7LQZUzR-UgorcHCSIZ_uRCF-ZTLQnQbNUG13WdRaQDX_3m0ewu6jxJ2Ie-gQvwFXyYdy3ZIxhkl0hJ2VGRZF6Iul1GgmSKzO5x92HASTCa0m0XzXjctyxy5aRgxOTOxhzl-Qz9P5jTlRzXngIWh6bCNZdaVEIxd9H6a2fDdToHYg0gowaU93SV2P5YbT0-8ShD0eeNiQEFHXn4HcsQUCrsiacEeGDZY"/>
|
||||||
|
<span>AI 자연어 검색</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Result Tabs -->
|
||||||
|
<div class="flex justify-center border-b border-outline-variant">
|
||||||
|
<nav aria-label="Tabs" class="flex gap-8">
|
||||||
|
<button class="border-primary text-primary border-b-2 py-4 px-1 font-label-md text-label-md">전체 (128)</button>
|
||||||
|
<button class="border-transparent text-on-surface-variant hover:text-primary hover:border-outline-variant border-b-2 py-4 px-1 font-label-md text-label-md">행사 (12)</button>
|
||||||
|
<button class="border-transparent text-on-surface-variant hover:text-primary hover:border-outline-variant border-b-2 py-4 px-1 font-label-md text-label-md">부스 (45)</button>
|
||||||
|
<button class="border-transparent text-on-surface-variant hover:text-primary hover:border-outline-variant border-b-2 py-4 px-1 font-label-md text-label-md">업체 (32)</button>
|
||||||
|
<button class="border-transparent text-on-surface-variant hover:text-primary hover:border-outline-variant border-b-2 py-4 px-1 font-label-md text-label-md">문서 (24)</button>
|
||||||
|
<button class="border-transparent text-on-surface-variant hover:text-primary hover:border-outline-variant border-b-2 py-4 px-1 font-label-md text-label-md">콘텐츠 (15)</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Content Grid: Facets + Results -->
|
||||||
|
<div class="grid grid-cols-12 gap-gutter">
|
||||||
|
<!-- Left Sidebar: Filters -->
|
||||||
|
<aside class="col-span-3 space-y-stack-lg">
|
||||||
|
<div class="bg-white border border-outline-variant rounded-xl p-6 space-y-8">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h3 class="font-title-sm text-label-md uppercase tracking-wider text-on-surface-variant">행사 연도</h3>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer group">
|
||||||
|
<input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary/20" type="checkbox"/>
|
||||||
|
<span class="text-body-base group-hover:text-primary">2026</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer group">
|
||||||
|
<input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary/20" type="checkbox"/>
|
||||||
|
<span class="text-body-base group-hover:text-primary font-semibold">2025</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer group">
|
||||||
|
<input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary/20" type="checkbox"/>
|
||||||
|
<span class="text-body-base group-hover:text-primary">2024 이전</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h3 class="font-title-sm text-label-md uppercase tracking-wider text-on-surface-variant">상태</h3>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer group">
|
||||||
|
<input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary/20" type="checkbox"/>
|
||||||
|
<span class="text-body-base group-hover:text-primary">진행 중</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer group">
|
||||||
|
<input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary/20" type="checkbox"/>
|
||||||
|
<span class="text-body-base group-hover:text-primary">확정/승인</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer group">
|
||||||
|
<input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary/20" type="checkbox"/>
|
||||||
|
<span class="text-body-base group-hover:text-primary">대기</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h3 class="font-title-sm text-label-md uppercase tracking-wider text-on-surface-variant">담당 부서</h3>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer group">
|
||||||
|
<input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary/20" type="checkbox"/>
|
||||||
|
<span class="text-body-base group-hover:text-primary">전시운영팀</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer group">
|
||||||
|
<input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary/20" type="checkbox"/>
|
||||||
|
<span class="text-body-base group-hover:text-primary">시설관리팀</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer group">
|
||||||
|
<input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary/20" type="checkbox"/>
|
||||||
|
<span class="text-body-base group-hover:text-primary">홍보팀</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h3 class="font-title-sm text-label-md uppercase tracking-wider text-on-surface-variant">파일 형식</h3>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer group">
|
||||||
|
<input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary/20" type="checkbox"/>
|
||||||
|
<span class="text-body-base group-hover:text-primary">PDF</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer group">
|
||||||
|
<input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary/20" type="checkbox"/>
|
||||||
|
<span class="text-body-base group-hover:text-primary">DWG/CAD</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center gap-3 cursor-pointer group">
|
||||||
|
<input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary/20" type="checkbox"/>
|
||||||
|
<span class="text-body-base group-hover:text-primary">Excel</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Right Side: Results List -->
|
||||||
|
<div class="col-span-9 space-y-stack-md">
|
||||||
|
<!-- AI Insight Card -->
|
||||||
|
<div class="bg-secondary-fixed/30 border-2 border-secondary-container rounded-xl p-8 relative overflow-hidden group hover:shadow-lg transition-all">
|
||||||
|
<div class="absolute top-0 right-0 w-32 h-32 -mr-8 -mt-8 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||||
|
<img alt="AI Icon" class="w-full h-full" src="https://lh3.googleusercontent.com/aida/AP1WRLu1SFz3uW8s6iC8BUAS9XvAFoM_7LQZUzR-UgorcHCSIZ_uRCF-ZTLQnQbNUG13WdRaQDX_3m0ewu6jxJ2Ie-gQvwFXyYdy3ZIxhkl0hJ2VGRZF6Iul1GgmSKzO5x92HASTCa0m0XzXjctyxy5aRgxOTOxhzl-Qz9P5jTlRzXngIWh6bCNZdaVEIxd9H6a2fDdToHYg0gowaU93SV2P5YbT0-8ShD0eeNiQEFHXn4HcsQUCrsiacEeGDZY"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4 mb-4">
|
||||||
|
<div class="p-2 bg-secondary-container rounded-lg">
|
||||||
|
<img alt="AI Icon" class="w-6 h-6 invert" src="https://lh3.googleusercontent.com/aida/AP1WRLu1SFz3uW8s6iC8BUAS9XvAFoM_7LQZUzR-UgorcHCSIZ_uRCF-ZTLQnQbNUG13WdRaQDX_3m0ewu6jxJ2Ie-gQvwFXyYdy3ZIxhkl0hJ2VGRZF6Iul1GgmSKzO5x92HASTCa0m0XzXjctyxy5aRgxOTOxhzl-Qz9P5jTlRzXngIWh6bCNZdaVEIxd9H6a2fDdToHYg0gowaU93SV2P5YbT0-8ShD0eeNiQEFHXn4HcsQUCrsiacEeGDZY"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-title-sm font-title-sm text-secondary">KINTEX AI Insight</h3>
|
||||||
|
<p class="text-label-xs text-on-secondary-fixed-variant">Generated Summary</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-base leading-relaxed text-on-background mb-8">
|
||||||
|
<span class="search-highlight">스마트팩토리 2026</span> <span class="search-highlight">부스 배치도</span> 검색 결과, 작년 대비 대형 부스 신청률이 15% 증가했습니다. 제1전시장 입구 동선 주변의 부스 밀도가 높아짐에 따라 보행자 혼잡도가 예상됩니다. <span class="font-bold">A홀 4~6구역</span>의 배치를 재검토할 필요가 있으며, 관련 유사 행사 리포트 3건을 함께 추천합니다.
|
||||||
|
</p>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<button class="bg-secondary-container text-on-secondary px-6 py-2.5 rounded-full font-label-md hover:bg-secondary transition-colors shadow-sm">데이터 분석 리포트 보기</button>
|
||||||
|
<button class="border border-secondary text-secondary px-6 py-2.5 rounded-full font-label-md hover:bg-secondary-fixed transition-colors">유사 행사 배치도 비교</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Result Card 1 -->
|
||||||
|
<div class="bg-white border border-outline-variant border-l-4 border-l-primary rounded-xl p-6 hover:shadow-md transition-shadow group">
|
||||||
|
<div class="flex justify-between items-start mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="bg-primary-fixed text-on-primary-fixed px-3 py-1 rounded-full text-label-xs font-label-md uppercase">부스 관리</div>
|
||||||
|
<span class="text-on-surface-variant text-label-xs">• 2025.10.15 수정</span>
|
||||||
|
</div>
|
||||||
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">more_vert</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<div class="flex-shrink-0 w-12 h-12 bg-surface-container rounded-lg flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-primary text-3xl">map</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<h4 class="text-title-sm font-title-sm group-hover:text-primary transition-colors mb-2 cursor-pointer">
|
||||||
|
<span class="search-highlight">스마트팩토리</span> <span class="search-highlight">2026</span> 제1전시장 <span class="search-highlight">부스 배치도</span> (최종안)
|
||||||
|
</h4>
|
||||||
|
<p class="text-body-base text-on-surface-variant line-clamp-2">
|
||||||
|
<span class="search-highlight">2026</span>년 3월 개최 예정인 스마트제조 혁신 전시회의 전체 레이아웃 설계안입니다. 주최측 요구사항이 반영된 A~F홀 섹터별 독립 부스 및 공동관 구획 정보가 포함되어 있습니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 flex items-center gap-4 text-label-xs text-on-surface-variant border-t border-outline-variant/30 pt-4">
|
||||||
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-sm">attachment</span> SmartFactory_2026_FloorPlan_vFinal.dwg</span>
|
||||||
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-sm">person</span> 전시운영팀 김철수 대리</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Result Card 2 (Operational) -->
|
||||||
|
<div class="bg-white border border-outline-variant border-l-4 border-l-tertiary-container rounded-xl p-6 hover:shadow-md transition-shadow group">
|
||||||
|
<div class="flex justify-between items-start mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="bg-tertiary-fixed text-on-tertiary-fixed px-3 py-1 rounded-full text-label-xs font-label-md uppercase">행사 운영</div>
|
||||||
|
<span class="text-on-surface-variant text-label-xs">• 2025.11.02 업로드</span>
|
||||||
|
</div>
|
||||||
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">more_vert</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<div class="flex-shrink-0 w-12 h-12 bg-surface-container rounded-lg flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-tertiary text-3xl">calendar_month</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<h4 class="text-title-sm font-title-sm group-hover:text-primary transition-colors mb-2 cursor-pointer">
|
||||||
|
국제 <span class="search-highlight">스마트팩토리</span> 및 산업로봇 컨퍼런스 <span class="search-highlight">2026</span> 운영 매뉴얼
|
||||||
|
</h4>
|
||||||
|
<p class="text-body-base text-on-surface-variant line-clamp-2">
|
||||||
|
행사 당일 현장 <span class="search-highlight">부스</span> 설치 및 철거 프로세스 안내서입니다. 전시장 로딩덕 접근 시간표 및 비상 대피 동선, 안전 관리 규정이 통합되어 수록되어 있습니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 flex items-center gap-4 text-label-xs text-on-surface-variant border-t border-outline-variant/30 pt-4">
|
||||||
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-sm">picture_as_pdf</span> Operations_Manual_2026.pdf</span>
|
||||||
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-sm">person</span> 홍보팀 이영희 팀장</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div class="flex justify-center py-8">
|
||||||
|
<nav class="flex gap-2">
|
||||||
|
<button class="w-10 h-10 flex items-center justify-center border border-outline-variant rounded hover:bg-surface-container transition-colors"><span class="material-symbols-outlined">chevron_left</span></button>
|
||||||
|
<button class="w-10 h-10 flex items-center justify-center bg-primary text-white rounded font-label-md">1</button>
|
||||||
|
<button class="w-10 h-10 flex items-center justify-center border border-outline-variant rounded hover:bg-surface-container transition-colors font-label-md">2</button>
|
||||||
|
<button class="w-10 h-10 flex items-center justify-center border border-outline-variant rounded hover:bg-surface-container transition-colors font-label-md">3</button>
|
||||||
|
<button class="w-10 h-10 flex items-center justify-center border border-outline-variant rounded hover:bg-surface-container transition-colors font-label-md">4</button>
|
||||||
|
<button class="w-10 h-10 flex items-center justify-center border border-outline-variant rounded hover:bg-surface-container transition-colors"><span class="material-symbols-outlined">chevron_right</span></button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
// Micro-interaction for search bar focusing
|
||||||
|
const searchInput = document.querySelector('input[type="text"]');
|
||||||
|
const searchContainer = searchInput.closest('.group');
|
||||||
|
|
||||||
|
searchInput.addEventListener('focus', () => {
|
||||||
|
searchContainer.classList.add('scale-[1.01]');
|
||||||
|
searchContainer.classList.add('shadow-xl');
|
||||||
|
});
|
||||||
|
|
||||||
|
searchInput.addEventListener('blur', () => {
|
||||||
|
searchContainer.classList.remove('scale-[1.01]');
|
||||||
|
searchContainer.classList.remove('shadow-xl');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
437
stitch_kintex_ai_system_architect/scr_45_meeting/code.html
Normal file
437
stitch_kintex_ai_system_architect/scr_45_meeting/code.html
Normal file
@ -0,0 +1,437 @@
|
|||||||
|
<!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 AI - SCR-45 회의록 상세</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;800&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"/>
|
||||||
|
<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": {
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"outline": "#727781",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"primary": "#003765",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"primary-container": "#004e8b"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"base": "4px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"body-base": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: #c1c7d3;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-surface font-body-base overflow-hidden">
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<aside class="w-[240px] h-screen fixed left-0 top-0 border-r border-outline-variant bg-surface-container-lowest flex flex-col py-6 z-50">
|
||||||
|
<div class="px-6 mb-8">
|
||||||
|
<img alt="KINTEX AI Logo" class="h-8 object-contain" src="https://lh3.googleusercontent.com/aida/AP1WRLuPIxmrE2KEEIZK1TQvP8jxtO3MkEPMwc1tVCXQeurK2ywZzqrmszTWhS-MOk7l0NlBT-fBPr7AhpqDh_Us84e3UMXjCij089BjFJFtd8hUFB4nCRvA34TPEVBBTUOI57NDo3tHcwfds6dQIDxogGQ3h7AjQhNuygBIiOTVTVUBEtlzz7vP_MViWoBmnjyisUQcYXxLs8rK6MRbhhGH4FpRm8pylR9CssnJFPS2I6dvpRX4NSTCyvpubg"/>
|
||||||
|
<p class="font-label-md text-label-md text-on-surface-variant mt-2">Meeting Management</p>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 px-2 space-y-1">
|
||||||
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high rounded-full transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3" data-icon="dashboard">dashboard</span>
|
||||||
|
<span class="font-label-md text-label-md">대시보드</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-4 py-3 bg-secondary-container text-on-secondary-container rounded-full transition-all" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3" data-icon="description">description</span>
|
||||||
|
<span class="font-label-md text-label-md">회의록</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high rounded-full transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3" data-icon="groups">groups</span>
|
||||||
|
<span class="font-label-md text-label-md">참석자 관리</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high rounded-full transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3" data-icon="settings">settings</span>
|
||||||
|
<span class="font-label-md text-label-md">설정</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="px-4 mt-auto">
|
||||||
|
<button class="w-full bg-primary text-on-primary py-3 px-4 rounded-xl font-label-md text-label-md hover:opacity-90 transition-all flex items-center justify-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[18px]" data-icon="add_circle">add_circle</span>
|
||||||
|
새 회의 시작
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="fixed top-0 right-0 left-[240px] h-16 bg-surface-bright border-b border-outline-variant flex justify-between items-center px-gutter z-40">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="flex items-center text-on-surface-variant text-body-sm font-body-sm">
|
||||||
|
<span>사전업무협의</span>
|
||||||
|
<span class="material-symbols-outlined mx-1 text-sm" data-icon="chevron_right">chevron_right</span>
|
||||||
|
<span class="text-primary font-bold">회의록 상세 (SCR-45)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button class="bg-primary-container text-on-primary-container px-4 py-2 rounded-lg font-label-md text-label-md flex items-center gap-2 hover:opacity-90 transition-all">
|
||||||
|
<span class="material-symbols-outlined text-[18px]" data-icon="picture_as_pdf">picture_as_pdf</span>
|
||||||
|
회의록 PDF 내보내기
|
||||||
|
</button>
|
||||||
|
<div class="flex items-center gap-3 ml-4 border-l pl-4 border-outline-variant">
|
||||||
|
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||||
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||||
|
</button>
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center overflow-hidden border border-outline-variant">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant" data-icon="account_circle">account_circle</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<main class="ml-[240px] mt-16 h-[calc(100vh-64px)] flex overflow-hidden">
|
||||||
|
<!-- Left Panel: Meeting List -->
|
||||||
|
<section class="w-[320px] bg-surface border-r border-outline-variant flex flex-col overflow-hidden">
|
||||||
|
<div class="p-4 border-b border-outline-variant">
|
||||||
|
<div class="relative">
|
||||||
|
<input class="w-full bg-surface-container-low border border-outline-variant rounded-full py-2 pl-10 pr-4 text-body-sm focus:ring-1 focus:ring-primary focus:outline-none" placeholder="회의명, 일시 검색" type="text"/>
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]" data-icon="search">search</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 overflow-y-auto custom-scrollbar">
|
||||||
|
<!-- SCR-45 Active Item -->
|
||||||
|
<div class="p-4 bg-secondary-fixed text-on-secondary-fixed-variant border-l-4 border-secondary-container cursor-pointer transition-colors relative">
|
||||||
|
<div class="flex justify-between items-start mb-1">
|
||||||
|
<span class="font-label-md text-label-md opacity-70">SCR-45</span>
|
||||||
|
<span class="bg-error-red text-white text-[10px] font-bold px-1.5 py-0.5 rounded">D-30</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-title-sm text-[15px] leading-tight mb-2">KINTEX AI 전시관리 기획 회의</h3>
|
||||||
|
<div class="flex items-center gap-2 text-label-md opacity-80">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" data-icon="calendar_month">calendar_month</span>
|
||||||
|
2024.05.15 14:00
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- SCR-44 Item -->
|
||||||
|
<div class="p-4 hover:bg-surface-container cursor-pointer transition-colors border-b border-outline-variant/30">
|
||||||
|
<div class="flex justify-between items-start mb-1">
|
||||||
|
<span class="font-label-md text-label-md text-on-surface-variant">SCR-44</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-title-sm text-[15px] leading-tight mb-2 text-on-surface">네트워크 인프라 구축 2차 미팅</h3>
|
||||||
|
<div class="flex items-center gap-2 text-label-md text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" data-icon="calendar_month">calendar_month</span>
|
||||||
|
2024.05.12 10:30
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- SCR-43 Item -->
|
||||||
|
<div class="p-4 hover:bg-surface-container cursor-pointer transition-colors border-b border-outline-variant/30">
|
||||||
|
<div class="flex justify-between items-start mb-1">
|
||||||
|
<span class="font-label-md text-label-md text-on-surface-variant">SCR-43</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-title-sm text-[15px] leading-tight mb-2 text-on-surface">보안 가이드라인 수립 회의</h3>
|
||||||
|
<div class="flex items-center gap-2 text-label-md text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" data-icon="calendar_month">calendar_month</span>
|
||||||
|
2024.05.10 16:00
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- SCR-42 Item -->
|
||||||
|
<div class="p-4 hover:bg-surface-container cursor-pointer transition-colors border-b border-outline-variant/30">
|
||||||
|
<div class="flex justify-between items-start mb-1">
|
||||||
|
<span class="font-label-md text-label-md text-on-surface-variant">SCR-42</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-title-sm text-[15px] leading-tight mb-2 text-on-surface">UI/UX 최종 컨셉 리뷰</h3>
|
||||||
|
<div class="flex items-center gap-2 text-label-md text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" data-icon="calendar_month">calendar_month</span>
|
||||||
|
2024.05.08 13:00
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Right Panel: Detail View -->
|
||||||
|
<section class="flex-1 flex flex-col bg-surface-bright overflow-hidden relative">
|
||||||
|
<!-- Audio Player -->
|
||||||
|
<div class="bg-surface-container-lowest border-b border-outline-variant p-4 flex items-center gap-6">
|
||||||
|
<button class="w-10 h-10 rounded-full bg-primary text-on-primary flex items-center justify-center hover:scale-105 transition-transform">
|
||||||
|
<span class="material-symbols-outlined" data-icon="play_arrow" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
|
||||||
|
</button>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex justify-between text-label-md text-on-surface-variant mb-1 px-1">
|
||||||
|
<span>04:15</span>
|
||||||
|
<span>42:30</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full h-1.5 bg-surface-container rounded-full overflow-hidden relative">
|
||||||
|
<div class="absolute top-0 left-0 h-full bg-secondary w-[10%]"></div>
|
||||||
|
<div class="absolute top-1/2 left-[10%] -translate-y-1/2 w-3 h-3 bg-white border-2 border-secondary rounded-full shadow-md cursor-pointer"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 border-l pl-4 border-outline-variant">
|
||||||
|
<div class="flex items-center gap-1 text-on-surface-variant hover:text-primary cursor-pointer">
|
||||||
|
<span class="material-symbols-outlined text-[20px]" data-icon="volume_up">volume_up</span>
|
||||||
|
</div>
|
||||||
|
<select class="bg-transparent border-none text-label-md font-bold focus:ring-0 cursor-pointer">
|
||||||
|
<option>1.0x</option>
|
||||||
|
<option>1.2x</option>
|
||||||
|
<option>1.5x</option>
|
||||||
|
<option>2.0x</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Scrollable Content -->
|
||||||
|
<div class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6">
|
||||||
|
<!-- AI Summary Section -->
|
||||||
|
<div class="bg-on-secondary-container/5 border-2 border-secondary-container/20 rounded-2xl p-6 relative overflow-hidden">
|
||||||
|
<div class="absolute top-0 right-0 opacity-10 pointer-events-none p-4">
|
||||||
|
<img alt="Analytics Icon" class="w-24 h-24" src="https://lh3.googleusercontent.com/aida/AP1WRLujD1FMRHChfM_aVKt2cd12chhcnm31L8Ks2EAzo-_FQ1_RV3zmYa4WUlSJ67wYexda4SpJU88Y5L0HdiYx6fLuKFdsDKjKWm1SmTq4PIP2tx1Nys-Txdlq4Wc1keg1GKsgrxNY68bHBEhurr-0NorgLbpp032gBkj_vE345bYKJwSr5MEnipvo_1P7iE9cXEBybLmdLLYK6vM1nB7dbmVt9_NHG3NQgK7wcPfIaNBrnXrEqtZeckWX3v8"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-secondary-container flex items-center justify-center shadow-md">
|
||||||
|
<span class="material-symbols-outlined text-on-secondary-container" data-icon="auto_awesome" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="font-headline-md text-[18px] text-secondary">AI 요약 핵심 내용</h2>
|
||||||
|
</div>
|
||||||
|
<ul class="space-y-3">
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<div class="mt-1.5 w-1.5 h-1.5 rounded-full bg-secondary flex-shrink-0"></div>
|
||||||
|
<p class="text-body-base leading-relaxed"><strong class="text-secondary">트래픽 모니터링 시스템:</strong> 실시간 대규모 인원 유입에 따른 병목 구간 자동 감지 및 분산 가이드라인 수립.</p>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<div class="mt-1.5 w-1.5 h-1.5 rounded-full bg-secondary flex-shrink-0"></div>
|
||||||
|
<p class="text-body-base leading-relaxed"><strong class="text-secondary">클라우드 지연 시간 최적화:</strong> 에지 서버 배치를 통한 데이터 전송 지연 20ms 이내 단축 목표 합의.</p>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<div class="mt-1.5 w-1.5 h-1.5 rounded-full bg-secondary flex-shrink-0"></div>
|
||||||
|
<p class="text-body-base leading-relaxed"><strong class="text-secondary">파일럿 테스트 일정:</strong> 6월 1주차부터 1전시장 B홀에서 실환경 성능 검증 단계 진입 결정.</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- STT Transcription Section -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between mb-4 px-2">
|
||||||
|
<h2 class="font-headline-md text-[18px] flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-primary" data-icon="stt">rtt</span>
|
||||||
|
STT 회의 전사
|
||||||
|
</h2>
|
||||||
|
<span class="text-label-md text-on-surface-variant bg-surface-container px-3 py-1 rounded-full">정확도 96.8%</span>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-6 px-2">
|
||||||
|
<!-- Speaker A -->
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-primary-fixed flex-shrink-0 flex items-center justify-center font-bold text-on-primary-fixed">A</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="font-bold text-body-sm">참석자 A (김민수 대리)</span>
|
||||||
|
<span class="text-label-xs text-on-surface-variant">04:15</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-2xl rounded-tl-none p-4 shadow-sm">
|
||||||
|
<p class="text-body-base leading-relaxed">
|
||||||
|
이지현 팀장님, 이번 AI 전시관리 시스템의 핵심 모듈인 트래픽 예측 알고리즘에 대해 설명 부탁드립니다.
|
||||||
|
특히 이번 KINTEX 대형 행사에서 예상되는 동시 접속자 처리 용량이 어느 정도 수준인지 궁금합니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- AI Assistant Inline -->
|
||||||
|
<div class="flex justify-center my-4">
|
||||||
|
<div class="bg-secondary-container text-on-secondary-container px-6 py-3 rounded-full flex items-center gap-3 shadow-lg transform hover:scale-[1.02] transition-transform">
|
||||||
|
<span class="material-symbols-outlined animate-pulse" data-icon="smart_toy" style="font-variation-settings: 'FILL' 1;">smart_toy</span>
|
||||||
|
<p class="text-body-sm">
|
||||||
|
<strong class="mr-2">분석 완료:</strong> 현재 논의 중인 트래픽 예측 모듈은 <span class="underline decoration-2">98.2%의 정확도</span>를 보이며, 초당 15,000건의 이벤트를 지연 없이 처리 가능합니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Speaker B -->
|
||||||
|
<div class="flex gap-4 flex-row-reverse text-right">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-secondary-fixed flex-shrink-0 flex items-center justify-center font-bold text-on-secondary-fixed">B</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center justify-end gap-2 mb-1">
|
||||||
|
<span class="text-label-xs text-on-surface-variant">04:42</span>
|
||||||
|
<span class="font-bold text-body-sm">참석자 B (이지현 팀장)</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-secondary-fixed/30 border border-secondary-container/20 rounded-2xl rounded-tr-none p-4 shadow-sm inline-block max-w-[80%]">
|
||||||
|
<p class="text-body-base leading-relaxed">
|
||||||
|
네, 민수 대리님. 현재 설계된 알고리즘은 강화학습 기반으로 유동인구의 흐름을 5분 단위로 예측합니다.
|
||||||
|
KINTEX 1, 2전시장 통합 시 약 10만 명의 실시간 위치 데이터를 안정적으로 소화할 수 있도록 아키텍처를 잡았습니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Action Items Table -->
|
||||||
|
<div class="mt-8 bg-surface-container-lowest border border-outline-variant rounded-2xl overflow-hidden shadow-sm">
|
||||||
|
<div class="bg-surface-container-low px-6 py-4 border-b border-outline-variant flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-primary" data-icon="task_alt">task_alt</span>
|
||||||
|
<h2 class="font-title-sm text-[16px]">후속 조치 사항 (Action Items)</h2>
|
||||||
|
</div>
|
||||||
|
<table class="w-full text-left">
|
||||||
|
<thead class="bg-surface-bright border-b border-outline-variant">
|
||||||
|
<tr>
|
||||||
|
<th class="px-6 py-3 font-label-md text-label-md text-on-surface-variant">할 일</th>
|
||||||
|
<th class="px-6 py-3 font-label-md text-label-md text-on-surface-variant">담당자</th>
|
||||||
|
<th class="px-6 py-3 font-label-md text-label-md text-on-surface-variant">기한</th>
|
||||||
|
<th class="px-6 py-3 font-label-md text-label-md text-on-surface-variant text-center">연결 서비스</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-outline-variant/30">
|
||||||
|
<tr class="hover:bg-surface-container-low transition-colors">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-5 h-5 border-2 border-outline rounded flex items-center justify-center cursor-pointer hover:bg-primary-container"></div>
|
||||||
|
<span class="text-body-base font-medium">AI 알고리즘 파일럿 테스트 계획서 작성</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm">김민수 대리</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm">2024.05.20</td>
|
||||||
|
<td class="px-6 py-4 text-center">
|
||||||
|
<button class="bg-surface-container-high text-on-surface hover:bg-primary hover:text-on-primary px-3 py-1.5 rounded-lg text-label-md transition-all inline-flex items-center gap-1.5">
|
||||||
|
<span class="material-symbols-outlined text-[16px]" data-icon="description">description</span>
|
||||||
|
서류
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-surface-container-low transition-colors">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-5 h-5 border-2 border-outline rounded flex items-center justify-center cursor-pointer hover:bg-primary-container"></div>
|
||||||
|
<span class="text-body-base font-medium">엣지 서버 하드웨어 발주 및 설치</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm">이지현 팀장</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm">2024.05.25</td>
|
||||||
|
<td class="px-6 py-4 text-center">
|
||||||
|
<button class="bg-surface-container-high text-on-surface hover:bg-primary hover:text-on-primary px-3 py-1.5 rounded-lg text-label-md transition-all inline-flex items-center gap-1.5">
|
||||||
|
<span class="material-symbols-outlined text-[16px]" data-icon="event">event</span>
|
||||||
|
일정
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="h-12"></div> <!-- Padding for bottom bar -->
|
||||||
|
</div>
|
||||||
|
<!-- Bottom Input Bar -->
|
||||||
|
<div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-surface-bright via-surface-bright to-transparent pointer-events-none">
|
||||||
|
<div class="max-w-4xl mx-auto w-full flex items-center gap-3 bg-surface-container-lowest border border-outline-variant p-2 pl-4 rounded-full shadow-lg pointer-events-auto ring-4 ring-white">
|
||||||
|
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||||
|
<span class="material-symbols-outlined" data-icon="attachment">attachment</span>
|
||||||
|
</button>
|
||||||
|
<input class="flex-1 bg-transparent border-none focus:ring-0 text-body-base" placeholder="회의 내용에 대해 질문하거나 의견을 추가하세요..." type="text"/>
|
||||||
|
<button class="bg-primary text-on-primary w-10 h-10 rounded-full flex items-center justify-center hover:scale-105 transition-transform shadow-md">
|
||||||
|
<span class="material-symbols-outlined" data-icon="send" style="font-variation-settings: 'FILL' 1;">send</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
// Micro-interaction for Playback progress
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const progressBar = document.querySelector('.w-full.h-1.5.bg-surface-container');
|
||||||
|
const progressFill = document.querySelector('.bg-secondary.w-\\[10\\%\\]');
|
||||||
|
const progressHandle = document.querySelector('.left-\\[10\\%\\]');
|
||||||
|
|
||||||
|
if (progressBar) {
|
||||||
|
progressBar.addEventListener('click', (e) => {
|
||||||
|
const rect = progressBar.getBoundingClientRect();
|
||||||
|
const percent = (e.clientX - rect.left) / rect.width * 100;
|
||||||
|
progressFill.style.width = `${percent}%`;
|
||||||
|
progressHandle.style.left = `${percent}%`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simple search filter interaction
|
||||||
|
const searchInput = document.querySelector('input[placeholder*="검색"]');
|
||||||
|
const meetingItems = document.querySelectorAll('section.w-\\[320px\\] .cursor-pointer');
|
||||||
|
|
||||||
|
searchInput.addEventListener('input', (e) => {
|
||||||
|
const term = e.target.value.toLowerCase();
|
||||||
|
meetingItems.forEach(item => {
|
||||||
|
const text = item.textContent.toLowerCase();
|
||||||
|
item.style.display = text.includes(term) ? 'block' : 'none';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
452
stitch_kintex_ai_system_architect/scr_46_report_stats/code.html
Normal file
452
stitch_kintex_ai_system_architect/scr_46_report_stats/code.html
Normal file
@ -0,0 +1,452 @@
|
|||||||
|
<!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 AI - 업무보고 통계 (SCR-46)</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@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"/>
|
||||||
|
<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-tint": "#24609e",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"outline": "#727781",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"primary": "#003765",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"secondary-fixed": "#e5deff"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"section-padding": "96px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"base": "4px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"display-lg-mobile": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"body-sm": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body { font-family: 'Inter', 'Geist', sans-serif; background-color: #f9f9ff; }
|
||||||
|
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
||||||
|
.tabular-nums { font-variant-numeric: tabular-nums; }
|
||||||
|
.chart-grid { background-image: radial-gradient(#c1c7d3 0.5px, transparent 0.5px); background-size: 20px 20px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-background">
|
||||||
|
<!-- SideNavBar (Fixed Shell) -->
|
||||||
|
<aside class="fixed left-0 top-0 bottom-0 z-40 w-[240px] bg-surface-container-lowest border-r border-outline-variant flex flex-col">
|
||||||
|
<div class="p-6">
|
||||||
|
<h1 class="font-headline-md text-headline-md font-bold text-primary">KINTEX AI</h1>
|
||||||
|
<p class="font-body-sm text-on-surface-variant">전시관리 시스템</p>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 px-4 space-y-1">
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="font-body-base">대시보드</span>
|
||||||
|
</a>
|
||||||
|
<!-- Active State: 업무보고 -->
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 bg-primary-fixed text-on-primary-fixed font-bold rounded-lg transition-all duration-200 active:scale-95" href="#">
|
||||||
|
<span class="material-symbols-outlined">description</span>
|
||||||
|
<span class="font-body-base">업무보고</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
||||||
|
<span class="material-symbols-outlined">analytics</span>
|
||||||
|
<span class="font-body-base">통계분석</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
||||||
|
<span class="material-symbols-outlined">business_center</span>
|
||||||
|
<span class="font-body-base">시설관리</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span class="font-body-base">설정</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="p-4 border-t border-outline-variant flex items-center gap-3">
|
||||||
|
<img class="w-10 h-10 rounded-full bg-surface-container" data-alt="A professional headshot of a Korean facility manager wearing a clean corporate uniform, high-key studio lighting, modern minimalist background, 8k resolution, crisp details." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBcDb6o4O4oJHaZPzqG0ivB2vNsIdfTum6O5X1YvE-nQRIvw5vjf641q41SXMBC8FBjuejqf5ko5YdgLVI7-EY8UvbUxtswy7lwoDS7GC7T7H0rBuHvDdtdAW74baRuwsPAY2RUZK7J3tPTuTYUdl5bUEK7Up8A_gtt3lMct4V3KpTnkY7LpTtYIorrS-WOvKWmB9cCM8Bzgt_MiHQU7Ned91oud3R-ZQ_WHlh2VLREnYXmZTGvfIPDTPUqJqa8BwawO9og41IZvsA"/>
|
||||||
|
<div class="overflow-hidden">
|
||||||
|
<p class="font-label-md text-on-surface truncate">관리자 김진희</p>
|
||||||
|
<p class="font-label-xs text-on-surface-variant truncate">운영기획팀</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<main class="ml-[240px] flex flex-col min-h-screen">
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="sticky top-0 z-30 flex justify-between items-center w-full px-8 h-16 bg-surface-bright border-b border-outline-variant">
|
||||||
|
<div class="flex items-center gap-8">
|
||||||
|
<span class="font-title-sm text-title-sm font-bold text-primary">KINTEX AI 업무보고 통계</span>
|
||||||
|
<nav class="flex gap-6 mt-1">
|
||||||
|
<button class="font-title-sm text-title-sm text-on-surface-variant pb-2 hover:text-primary transition-colors cursor-pointer">일간</button>
|
||||||
|
<!-- Active State: 주간 -->
|
||||||
|
<button class="font-title-sm text-title-sm text-primary font-bold border-b-2 border-primary pb-2 cursor-pointer">주간</button>
|
||||||
|
<button class="font-title-sm text-title-sm text-on-surface-variant pb-2 hover:text-primary transition-colors cursor-pointer">월간</button>
|
||||||
|
<button class="font-title-sm text-title-sm text-on-surface-variant pb-2 hover:text-primary transition-colors cursor-pointer">분기</button>
|
||||||
|
<button class="font-title-sm text-title-sm text-on-surface-variant pb-2 hover:text-primary transition-colors cursor-pointer">연간</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button class="flex items-center gap-2 px-4 py-2 bg-primary text-on-primary rounded-lg font-label-md hover:bg-primary-container transition-all">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">download</span>
|
||||||
|
보고서 PDF
|
||||||
|
</button>
|
||||||
|
<div class="flex items-center gap-2 text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined cursor-pointer hover:text-primary p-1">notifications</span>
|
||||||
|
<span class="material-symbols-outlined cursor-pointer hover:text-primary p-1">account_circle</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Canvas -->
|
||||||
|
<div class="p-8 max-w-[1280px] w-full mx-auto space-y-gutter">
|
||||||
|
<!-- KPI Cards -->
|
||||||
|
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-gutter">
|
||||||
|
<!-- KPI 1 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-5 border-l-4 border-l-primary flex flex-col justify-between h-32 transition-all hover:shadow-md">
|
||||||
|
<span class="font-label-md text-on-surface-variant">총 업무 건수</span>
|
||||||
|
<div class="flex items-end justify-between">
|
||||||
|
<span class="font-display-lg text-display-lg tabular-nums">1,284</span>
|
||||||
|
<span class="font-label-md text-primary bg-primary-fixed px-2 py-0.5 rounded flex items-center">
|
||||||
|
<span class="material-symbols-outlined text-sm">trending_up</span> 12%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- KPI 2 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-5 border-l-4 border-l-secondary flex flex-col justify-between h-32 transition-all hover:shadow-md">
|
||||||
|
<span class="font-label-md text-on-surface-variant">완료율</span>
|
||||||
|
<div class="flex items-end justify-between">
|
||||||
|
<span class="font-display-lg text-display-lg tabular-nums">94.2%</span>
|
||||||
|
<span class="font-label-md text-on-secondary-fixed-variant bg-secondary-fixed px-2 py-0.5 rounded flex items-center">
|
||||||
|
<span class="material-symbols-outlined text-sm">check</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- KPI 3 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-5 border-l-4 border-l-tertiary flex flex-col justify-between h-32 transition-all hover:shadow-md">
|
||||||
|
<span class="font-label-md text-on-surface-variant">평균 처리 시간</span>
|
||||||
|
<div class="flex items-end justify-between">
|
||||||
|
<span class="font-display-lg text-display-lg tabular-nums">1.4h</span>
|
||||||
|
<span class="font-label-md text-on-tertiary-fixed-variant bg-tertiary-fixed px-2 py-0.5 rounded flex items-center">
|
||||||
|
<span class="material-symbols-outlined text-sm">speed</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- KPI 4 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-5 border-l-4 border-l-error-red flex flex-col justify-between h-32 transition-all hover:shadow-md">
|
||||||
|
<span class="font-label-md text-on-surface-variant">AI 자동화 비중</span>
|
||||||
|
<div class="flex items-end justify-between">
|
||||||
|
<span class="font-display-lg text-display-lg tabular-nums">68%</span>
|
||||||
|
<span class="font-label-md text-on-error-container bg-error-container px-2 py-0.5 rounded flex items-center">
|
||||||
|
<span class="material-symbols-outlined text-sm">smart_toy</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Chart Area -->
|
||||||
|
<section class="bg-surface-container-lowest border border-outline-variant rounded-xl p-6 transition-all hover:shadow-md">
|
||||||
|
<div class="flex justify-between items-center mb-8">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface">작업량 추이 (Work Volume Trend)</h3>
|
||||||
|
<p class="font-body-sm text-on-surface-variant">최근 7일간의 주요 업무 카테고리별 발생 건수</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="flex items-center gap-1.5 font-label-md">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-primary"></div><span>시설</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1.5 font-label-md">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-secondary"></div><span>보안</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1.5 font-label-md">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-tertiary-fixed-dim"></div><span>안내</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Visualizing a bar chart with CSS for Recharts aesthetic -->
|
||||||
|
<div class="h-64 chart-grid relative flex items-end justify-between px-8 border-b border-l border-outline-variant">
|
||||||
|
<!-- Day columns -->
|
||||||
|
<div class="flex-1 flex flex-col items-center justify-end gap-1 h-full px-4 group">
|
||||||
|
<div class="w-full flex flex-col justify-end gap-0.5 h-[60%]">
|
||||||
|
<div class="bg-primary-fixed-dim hover:bg-primary h-2/5 rounded-t-sm transition-all"></div>
|
||||||
|
<div class="bg-secondary-fixed-dim hover:bg-secondary h-1/5 rounded-t-sm transition-all"></div>
|
||||||
|
<div class="bg-tertiary-fixed-dim hover:bg-tertiary h-2/5 rounded-t-sm transition-all"></div>
|
||||||
|
</div>
|
||||||
|
<span class="absolute -bottom-8 font-label-md text-on-surface-variant">월요일</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex flex-col items-center justify-end gap-1 h-full px-4 group">
|
||||||
|
<div class="w-full flex flex-col justify-end gap-0.5 h-[75%]">
|
||||||
|
<div class="bg-primary-fixed-dim hover:bg-primary h-3/5 rounded-t-sm transition-all"></div>
|
||||||
|
<div class="bg-secondary-fixed-dim hover:bg-secondary h-1/5 rounded-t-sm transition-all"></div>
|
||||||
|
<div class="bg-tertiary-fixed-dim hover:bg-tertiary h-1/5 rounded-t-sm transition-all"></div>
|
||||||
|
</div>
|
||||||
|
<span class="absolute -bottom-8 font-label-md text-on-surface-variant">화요일</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex flex-col items-center justify-end gap-1 h-full px-4 group">
|
||||||
|
<div class="w-full flex flex-col justify-end gap-0.5 h-[50%]">
|
||||||
|
<div class="bg-primary-fixed-dim hover:bg-primary h-2/5 rounded-t-sm transition-all"></div>
|
||||||
|
<div class="bg-secondary-fixed-dim hover:bg-secondary h-2/5 rounded-t-sm transition-all"></div>
|
||||||
|
<div class="bg-tertiary-fixed-dim hover:bg-tertiary h-1/5 rounded-t-sm transition-all"></div>
|
||||||
|
</div>
|
||||||
|
<span class="absolute -bottom-8 font-label-md text-on-surface-variant">수요일</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex flex-col items-center justify-end gap-1 h-full px-4 group">
|
||||||
|
<div class="w-full flex flex-col justify-end gap-0.5 h-[85%]">
|
||||||
|
<div class="bg-primary-fixed-dim hover:bg-primary h-2/5 rounded-t-sm transition-all"></div>
|
||||||
|
<div class="bg-secondary-fixed-dim hover:bg-secondary h-2/5 rounded-t-sm transition-all"></div>
|
||||||
|
<div class="bg-tertiary-fixed-dim hover:bg-tertiary h-1/5 rounded-t-sm transition-all"></div>
|
||||||
|
</div>
|
||||||
|
<span class="absolute -bottom-8 font-label-md text-on-surface-variant">목요일</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex flex-col items-center justify-end gap-1 h-full px-4 group">
|
||||||
|
<div class="w-full flex flex-col justify-end gap-0.5 h-[95%]">
|
||||||
|
<div class="bg-primary-fixed-dim hover:bg-primary h-3/5 rounded-t-sm transition-all"></div>
|
||||||
|
<div class="bg-secondary-fixed-dim hover:bg-secondary h-1/5 rounded-t-sm transition-all"></div>
|
||||||
|
<div class="bg-tertiary-fixed-dim hover:bg-tertiary h-1/5 rounded-t-sm transition-all"></div>
|
||||||
|
</div>
|
||||||
|
<span class="absolute -bottom-8 font-label-md text-on-surface-variant">금요일</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex flex-col items-center justify-end gap-1 h-full px-4 group">
|
||||||
|
<div class="w-full flex flex-col justify-end gap-0.5 h-[40%]">
|
||||||
|
<div class="bg-primary-fixed-dim hover:bg-primary h-2/5 rounded-t-sm transition-all"></div>
|
||||||
|
<div class="bg-secondary-fixed-dim hover:bg-secondary h-1/5 rounded-t-sm transition-all"></div>
|
||||||
|
<div class="bg-tertiary-fixed-dim hover:bg-tertiary h-2/5 rounded-t-sm transition-all"></div>
|
||||||
|
</div>
|
||||||
|
<span class="absolute -bottom-8 font-label-md text-on-surface-variant">토요일</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex flex-col items-center justify-end gap-1 h-full px-4 group">
|
||||||
|
<div class="w-full flex flex-col justify-end gap-0.5 h-[30%]">
|
||||||
|
<div class="bg-primary-fixed-dim hover:bg-primary h-2/5 rounded-t-sm transition-all"></div>
|
||||||
|
<div class="bg-secondary-fixed-dim hover:bg-secondary h-2/5 rounded-t-sm transition-all"></div>
|
||||||
|
<div class="bg-tertiary-fixed-dim hover:bg-tertiary h-1/5 rounded-t-sm transition-all"></div>
|
||||||
|
</div>
|
||||||
|
<span class="absolute -bottom-8 font-label-md text-on-surface-variant">일요일</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-10"></div>
|
||||||
|
</section>
|
||||||
|
<!-- Breakdown Table -->
|
||||||
|
<section class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden transition-all hover:shadow-md">
|
||||||
|
<div class="p-6 border-b border-outline-variant flex justify-between items-center">
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface">상세 업무 보고 내역</h3>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<div class="relative">
|
||||||
|
<input class="pl-9 pr-4 py-2 border border-outline-variant rounded-full font-body-sm bg-surface-container-low focus:ring-2 focus:ring-primary outline-none" placeholder="작성자 검색" type="text"/>
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-2.5 text-[18px] text-on-surface-variant">search</span>
|
||||||
|
</div>
|
||||||
|
<button class="px-3 py-2 border border-outline-variant rounded-full font-label-md text-on-surface-variant flex items-center gap-1 hover:bg-surface-container-high">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">filter_list</span> 필터
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full text-left border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr class="bg-surface-container text-on-surface-variant font-label-md uppercase tracking-wider">
|
||||||
|
<th class="px-6 py-4">ID</th>
|
||||||
|
<th class="px-6 py-4">작성자</th>
|
||||||
|
<th class="px-6 py-4">업무 유형</th>
|
||||||
|
<th class="px-6 py-4">주요 내용</th>
|
||||||
|
<th class="px-6 py-4 text-right">건수</th>
|
||||||
|
<th class="px-6 py-4">상태</th>
|
||||||
|
<th class="px-6 py-4">최종 업데이트</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="font-body-sm text-on-surface divide-y divide-outline-variant">
|
||||||
|
<!-- Row 1 -->
|
||||||
|
<tr class="hover:bg-surface-container-low transition-colors">
|
||||||
|
<td class="px-6 py-4 tabular-nums text-on-surface-variant">#WR-1029</td>
|
||||||
|
<td class="px-6 py-4 flex items-center gap-2">
|
||||||
|
<div class="w-7 h-7 rounded-full bg-primary-fixed flex items-center justify-center text-[10px] font-bold text-on-primary-fixed">MK</div>
|
||||||
|
민경호
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="px-2 py-1 rounded bg-primary-fixed text-on-primary-fixed-variant text-[11px] font-bold">시설</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 truncate max-w-xs">1전시장 3홀 냉난방 장치 정기 점검 완료</td>
|
||||||
|
<td class="px-6 py-4 text-right tabular-nums font-medium">12</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="flex items-center gap-1 text-on-tertiary-fixed-variant">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-tertiary-fixed-dim"></span> 완료
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-on-surface-variant tabular-nums">2024.05.21 14:20</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 2 -->
|
||||||
|
<tr class="bg-surface-container-lowest hover:bg-surface-container-low transition-colors">
|
||||||
|
<td class="px-6 py-4 tabular-nums text-on-surface-variant">#WR-1030</td>
|
||||||
|
<td class="px-6 py-4 flex items-center gap-2">
|
||||||
|
<div class="w-7 h-7 rounded-full bg-secondary-fixed flex items-center justify-center text-[10px] font-bold text-on-secondary-fixed">ST</div>
|
||||||
|
성태호
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="px-2 py-1 rounded bg-secondary-fixed text-on-secondary-fixed-variant text-[11px] font-bold">보안</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 truncate max-w-xs">야간 순찰 및 출입 통제 구역 시스템 로그 분석</td>
|
||||||
|
<td class="px-6 py-4 text-right tabular-nums font-medium">45</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="flex items-center gap-1 text-primary">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span> 진행중
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-on-surface-variant tabular-nums">2024.05.21 15:05</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 3 -->
|
||||||
|
<tr class="hover:bg-surface-container-low transition-colors">
|
||||||
|
<td class="px-6 py-4 tabular-nums text-on-surface-variant">#WR-1031</td>
|
||||||
|
<td class="px-6 py-4 flex items-center gap-2">
|
||||||
|
<div class="w-7 h-7 rounded-full bg-tertiary-fixed flex items-center justify-center text-[10px] font-bold text-on-tertiary-fixed">JH</div>
|
||||||
|
정현우
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="px-2 py-1 rounded bg-tertiary-fixed text-on-tertiary-fixed-variant text-[11px] font-bold">안내</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 truncate max-w-xs">VIP 컨퍼런스 의전 및 챗봇 연동 고객 문의 대응</td>
|
||||||
|
<td class="px-6 py-4 text-right tabular-nums font-medium">108</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="flex items-center gap-1 text-on-tertiary-fixed-variant">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-tertiary-fixed-dim"></span> 완료
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-on-surface-variant tabular-nums">2024.05.21 16:30</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 4 -->
|
||||||
|
<tr class="bg-surface-container-lowest hover:bg-surface-container-low transition-colors">
|
||||||
|
<td class="px-6 py-4 tabular-nums text-on-surface-variant">#WR-1032</td>
|
||||||
|
<td class="px-6 py-4 flex items-center gap-2">
|
||||||
|
<div class="w-7 h-7 rounded-full bg-surface-variant flex items-center justify-center text-[10px] font-bold text-on-surface-variant">MS</div>
|
||||||
|
미화팀
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="px-2 py-1 rounded bg-surface-variant text-on-surface-variant text-[11px] font-bold">미화</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 truncate max-w-xs">전시 종료 후 메인 로비 방역 및 카펫 크리닝</td>
|
||||||
|
<td class="px-6 py-4 text-right tabular-nums font-medium">8</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="flex items-center gap-1 text-error-red">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-error-red"></span> 지연
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-on-surface-variant tabular-nums">2024.05.21 16:45</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 5 -->
|
||||||
|
<tr class="hover:bg-surface-container-low transition-colors">
|
||||||
|
<td class="px-6 py-4 tabular-nums text-on-surface-variant">#WR-1033</td>
|
||||||
|
<td class="px-6 py-4 flex items-center gap-2">
|
||||||
|
<div class="w-7 h-7 rounded-full bg-primary-fixed flex items-center justify-center text-[10px] font-bold text-on-primary-fixed">CS</div>
|
||||||
|
최승우
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="px-2 py-1 rounded bg-primary-fixed text-on-primary-fixed-variant text-[11px] font-bold">시설</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 truncate max-w-xs">옥상 태양광 패널 효율 측정 및 클라우드 데이터 전송</td>
|
||||||
|
<td class="px-6 py-4 text-right tabular-nums font-medium">2</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="flex items-center gap-1 text-primary">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span> 진행중
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-on-surface-variant tabular-nums">2024.05.21 17:10</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 bg-surface-container-low flex justify-between items-center border-t border-outline-variant">
|
||||||
|
<span class="font-label-xs text-on-surface-variant">Showing 1 to 5 of 124 entries</span>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="px-3 py-1 border border-outline-variant rounded font-label-md hover:bg-surface-container-high disabled:opacity-50" disabled="">이전</button>
|
||||||
|
<button class="px-3 py-1 bg-primary text-on-primary rounded font-label-md">1</button>
|
||||||
|
<button class="px-3 py-1 border border-outline-variant rounded font-label-md hover:bg-surface-container-high">2</button>
|
||||||
|
<button class="px-3 py-1 border border-outline-variant rounded font-label-md hover:bg-surface-container-high">3</button>
|
||||||
|
<button class="px-3 py-1 border border-outline-variant rounded font-label-md hover:bg-surface-container-high">다음</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
// Simple micro-interaction for chart bars
|
||||||
|
document.querySelectorAll('.group div[class*="bg-"]').forEach(bar => {
|
||||||
|
bar.addEventListener('mouseenter', () => {
|
||||||
|
bar.style.filter = 'brightness(1.1)';
|
||||||
|
});
|
||||||
|
bar.addEventListener('mouseleave', () => {
|
||||||
|
bar.style.filter = 'none';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
367
stitch_kintex_ai_system_architect/scr_47_notification/code.html
Normal file
367
stitch_kintex_ai_system_architect/scr_47_notification/code.html
Normal file
@ -0,0 +1,367 @@
|
|||||||
|
<!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 AI - 알림 센터</title>
|
||||||
|
<!-- Google Fonts: Inter for English, Geist for labels, Material Symbols for icons -->
|
||||||
|
<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"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"outline": "#727781",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"primary": "#003765",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"background": "#faf8ff"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"container-padding": "24px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-lg": "24px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"display-lg": ["Inter", "sans-serif"],
|
||||||
|
"headline-md": ["Inter", "sans-serif"],
|
||||||
|
"title-sm": ["Inter", "sans-serif"],
|
||||||
|
"label-xs": ["Geist", "sans-serif"],
|
||||||
|
"label-md": ["Geist", "sans-serif"],
|
||||||
|
"body-sm": ["Inter", "sans-serif"],
|
||||||
|
"body-base": ["Inter", "sans-serif"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', 'Pretendard', sans-serif;
|
||||||
|
background-color: #f9f9ff;
|
||||||
|
}
|
||||||
|
.glass-overlay {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="text-on-surface">
|
||||||
|
<!-- SideNavBar (JSON Derived) -->
|
||||||
|
<aside class="w-[240px] h-screen fixed left-0 top-0 flex flex-col border-r border-outline-variant bg-surface-container-lowest dark:bg-inverse-surface z-50">
|
||||||
|
<div class="flex flex-col gap-base px-stack-md py-stack-lg flex-1">
|
||||||
|
<div class="flex items-center gap-3 mb-8">
|
||||||
|
<div class="w-10 h-10 rounded-full overflow-hidden bg-surface-container">
|
||||||
|
<img alt="KINTEX AI Manager Avatar" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDSJsLxx2EaoXEW-9w1pCF0HyUBbDdn3fBa9WOxstnJ22Ap4Svu83JRg8QoLKn8UvEJv9-3eOF0hRjvYo_4Vwp4fmeq8ODKNCoFfAn2s7U0QMXinOf4jIPB6lDSZuJPtfrqiFFVuAxaMpFy-1kac4LlwWyRuSPUUyNDawMPjfi9Cj2qyf7i9zCw2lsf_kquZE5zcmMBndXotZnCq2s0S_t818Bzb6_4Rwp3X8oqt9xaR3Xlwl0rFnT2HRfdslinKUpr594lUmPd7AA"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="text-title-sm font-display-lg font-bold text-primary dark:text-inverse-primary">KINTEX AI</span>
|
||||||
|
<span class="font-label-md text-label-md text-on-surface-variant">Exhibition Mgmt</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex flex-col gap-1">
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low transition-colors font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
대시보드
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low transition-colors font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">event_available</span>
|
||||||
|
전시 관리
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low transition-colors font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">assignment_ind</span>
|
||||||
|
신청 현황
|
||||||
|
</a>
|
||||||
|
<!-- Active Tab: 알림 -->
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 bg-primary-container dark:bg-primary text-on-primary-container dark:text-on-primary font-bold rounded-xl font-label-md text-label-md scale-98 transition-transform duration-150" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">notifications</span>
|
||||||
|
알림
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low transition-colors font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">bar_chart</span>
|
||||||
|
통계 분석
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low transition-colors font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
시스템 설정
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="px-stack-md py-stack-lg mt-auto border-t border-outline-variant">
|
||||||
|
<button class="w-full flex items-center justify-center gap-2 py-3 rounded-full border border-outline text-on-surface-variant font-label-md text-label-md hover:bg-surface-container transition-colors">
|
||||||
|
<span class="material-symbols-outlined">logout</span>
|
||||||
|
로그아웃
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<main class="ml-[240px] min-h-screen flex flex-col">
|
||||||
|
<!-- TopAppBar (JSON Derived) -->
|
||||||
|
<header class="w-full sticky top-0 bg-surface-bright dark:bg-background border-b border-outline-variant z-40">
|
||||||
|
<div class="flex justify-between items-center h-16 px-container-padding max-w-[1280px] mx-auto w-full">
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<h1 class="font-headline-md text-headline-md font-semibold text-on-surface dark:text-inverse-on-surface">알림 센터</h1>
|
||||||
|
<nav class="hidden md:flex items-center gap-6 ml-4">
|
||||||
|
<a class="text-on-surface-variant dark:text-surface-variant font-label-md text-label-md hover:text-primary transition-colors" href="#">마감</a>
|
||||||
|
<a class="text-on-surface-variant dark:text-surface-variant font-label-md text-label-md hover:text-primary transition-colors" href="#">낙찰</a>
|
||||||
|
<a class="text-on-surface-variant dark:text-surface-variant font-label-md text-label-md hover:text-primary transition-colors" href="#">승인</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button class="px-4 py-2 bg-primary text-on-primary rounded-full font-label-md text-label-md hover:opacity-90 transition-opacity">
|
||||||
|
모두 읽음으로 표시
|
||||||
|
</button>
|
||||||
|
<div class="h-6 w-px bg-outline-variant"></div>
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container rounded-full transition-colors" title="알림 설정">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container rounded-full transition-colors">
|
||||||
|
<span class="material-symbols-outlined">account_circle</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container rounded-full transition-colors">
|
||||||
|
<span class="material-symbols-outlined">help_outline</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Notification Content -->
|
||||||
|
<div class="flex-1 max-w-[1280px] mx-auto w-full px-container-padding py-8">
|
||||||
|
<!-- Filter Bar -->
|
||||||
|
<div class="flex items-center gap-3 mb-8 overflow-x-auto pb-2 scrollbar-hide">
|
||||||
|
<button class="px-6 py-2 bg-primary text-on-primary rounded-full font-label-md text-label-md shadow-sm">전체</button>
|
||||||
|
<button class="px-6 py-2 bg-surface-container-lowest border border-outline-variant text-on-surface-variant rounded-full font-label-md text-label-md hover:bg-surface-container transition-colors">마감</button>
|
||||||
|
<button class="px-6 py-2 bg-surface-container-lowest border border-outline-variant text-on-surface-variant rounded-full font-label-md text-label-md hover:bg-surface-container transition-colors">낙찰</button>
|
||||||
|
<button class="px-6 py-2 bg-surface-container-lowest border border-outline-variant text-on-surface-variant rounded-full font-label-md text-label-md hover:bg-surface-container transition-colors">승인</button>
|
||||||
|
<button class="px-6 py-2 bg-surface-container-lowest border border-outline-variant text-on-surface-variant rounded-full font-label-md text-label-md hover:bg-surface-container transition-colors">결제</button>
|
||||||
|
<button class="px-6 py-2 bg-surface-container-lowest border border-outline-variant text-on-surface-variant rounded-full font-label-md text-label-md hover:bg-surface-container transition-colors">시스템</button>
|
||||||
|
</div>
|
||||||
|
<!-- Notification List -->
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
<!-- Notification Item: Deadline (Urgent) -->
|
||||||
|
<div class="group relative flex items-start gap-4 p-5 bg-surface-container-lowest border border-outline-variant rounded-xl hover:shadow-md transition-all border-l-4 border-l-error">
|
||||||
|
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-error-container flex items-center justify-center">
|
||||||
|
<img class="w-6 h-6 object-contain" data-alt="A minimalist high-contrast vector icon of a classic analog clock with a subtle glowing aura, styled in deep red and pure white to signify urgency. The background is a soft, tinted red circle that fits perfectly into a modern corporate dashboard UI." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAbPuhxMlaQOAHd2aVUY77WrEOsUHB4rFuGFUpKlccP-sIdjTnjW36OLipUKtSkAGRrKGGliB4OxhQnXL9D5RIYRcg2YafR81aVy6t1vrNkBQcp2lnASDquNiifliFTdCUYehIXYzauibmtCrIP3T40cqJZinjmKEdrJGlzbNq8IyXgwnmVTftzK7EQWgWdaquh1z7UwkJhqIphA-U73yRz2U-f92g4RTLfGJxRLzS9dEtthdy0DOf3VOYWSp3dPqAsejE_rXm1NJw"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between gap-2 mb-1">
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface truncate">전시 부스 신청 마감 임박</h3>
|
||||||
|
<span class="text-on-surface-variant font-label-md text-label-md whitespace-nowrap">방금 전</span>
|
||||||
|
</div>
|
||||||
|
<p class="font-body-base text-body-base text-on-surface-variant mb-3">
|
||||||
|
2026 하반기 KINTEX 통합 전시회 부스 신청이 3시간 뒤 마감됩니다. 아직 제출하지 않은 서류가 있는지 확인해 주세요.
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="px-2 py-0.5 rounded bg-error text-on-error font-label-xs text-label-xs">D-0</span>
|
||||||
|
<span class="w-2 h-2 rounded-full bg-[#0066B3]"></span>
|
||||||
|
</div>
|
||||||
|
<a class="text-primary font-label-md text-label-md hover:underline flex items-center gap-1" href="#">
|
||||||
|
신청하기 <span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Notification Item: Approval -->
|
||||||
|
<div class="group relative flex items-start gap-4 p-5 bg-surface-container-lowest border border-outline-variant rounded-xl hover:shadow-md transition-all border-l-4 border-l-tertiary">
|
||||||
|
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-tertiary-container flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-on-tertiary" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between gap-2 mb-1">
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface truncate">부스 배치도 승인 완료</h3>
|
||||||
|
<span class="text-on-surface-variant font-label-md text-label-md whitespace-nowrap">2시간 전</span>
|
||||||
|
</div>
|
||||||
|
<p class="font-body-base text-body-base text-on-surface-variant mb-3">
|
||||||
|
제출하신 'A홀 스마트 가전관' 부스 배치도가 관리자에 의해 승인되었습니다. 상세 위치 및 설비 사양을 확인하시기 바랍니다.
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="px-2 py-0.5 rounded bg-tertiary-fixed text-on-tertiary-fixed font-label-xs text-label-xs">승인완료</span>
|
||||||
|
<span class="w-2 h-2 rounded-full bg-[#0066B3]"></span>
|
||||||
|
</div>
|
||||||
|
<a class="text-primary font-label-md text-label-md hover:underline flex items-center gap-1" href="#">
|
||||||
|
도면 보기 <span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Notification Item: Auction -->
|
||||||
|
<div class="group relative flex items-start gap-4 p-5 bg-surface-container-lowest border border-outline-variant rounded-xl hover:shadow-md transition-all border-l-4 border-l-secondary">
|
||||||
|
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-secondary-container flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-white">gavel</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between gap-2 mb-1">
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface truncate">입찰 결과 안내: 메인 라운지 광고 구좌</h3>
|
||||||
|
<span class="text-on-surface-variant font-label-md text-label-md whitespace-nowrap">5시간 전</span>
|
||||||
|
</div>
|
||||||
|
<p class="font-body-base text-body-base text-on-surface-variant mb-3">
|
||||||
|
축하드립니다! 제1전시장 중앙 로비 디지털 사이니지 광고 구좌 입찰에 최종 낙찰되셨습니다. 계약 절차를 진행해 주세요.
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="px-2 py-0.5 rounded bg-secondary-fixed text-on-secondary-fixed font-label-xs text-label-xs">낙찰</span>
|
||||||
|
</div>
|
||||||
|
<a class="text-primary font-label-md text-label-md hover:underline flex items-center gap-1" href="#">
|
||||||
|
계약서 확인 <span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Notification Item: Payment -->
|
||||||
|
<div class="group relative flex items-start gap-4 p-5 bg-surface-container-lowest border border-outline-variant rounded-xl hover:shadow-md transition-all border-l-4 border-l-primary">
|
||||||
|
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary-fixed flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-primary">credit_card</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between gap-2 mb-1">
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface truncate">전시 참가비 결제 확인</h3>
|
||||||
|
<span class="text-on-surface-variant font-label-md text-label-md whitespace-nowrap">어제</span>
|
||||||
|
</div>
|
||||||
|
<p class="font-body-base text-body-base text-on-surface-variant mb-3">
|
||||||
|
전시 참가 신청 비용 ₩3,500,000 입금이 확인되었습니다. 전자 세금계산서가 발행되었으니 확인 부탁드립니다.
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="px-2 py-0.5 rounded bg-primary-fixed text-on-primary-fixed-variant font-label-xs text-label-xs">결제완료</span>
|
||||||
|
</div>
|
||||||
|
<a class="text-primary font-label-md text-label-md hover:underline flex items-center gap-1" href="#">
|
||||||
|
영수증 출력 <span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Notification Item: System -->
|
||||||
|
<div class="group relative flex items-start gap-4 p-5 bg-surface-container-lowest border border-outline-variant rounded-xl hover:shadow-md transition-all border-l-4 border-l-outline">
|
||||||
|
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-surface-container-high flex items-center justify-center">
|
||||||
|
<img class="w-6 h-6 object-contain" data-alt="A sleek, tech-oriented vector graphic of a stylized computer gear or microchip, rendered in a professional grayscale and blue palette. It conveys system stability and technological infrastructure, set against a clean, circular light gray background suitable for a corporate notification system UI." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDf5z3BL0IObrO6yK7zIzm2R0x1dPF4yIwv0fy4fMf9pr4xEPS9tVXehuQnkIjqcm2dx1ZuZGpe269TuVzXvIabNF9bPB8jCq05vMqftsLh7YtYnG7-WJKOgr5W3-l_f66fI3NRSP10V8uvll_BUdd-XkNUTnMN-OCl4ZBp0DCXvzE0XRhJt2K2E4bt4oAHShj20xxi-bx-zL4_34e61iam4jdfxlyL-WCabmxUj-pMgNEcJcA13j4x20rGyUMeu71VTka3ChVfVx8"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center justify-between gap-2 mb-1">
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface truncate">시스템 정기 점검 안내</h3>
|
||||||
|
<span class="text-on-surface-variant font-label-md text-label-md whitespace-nowrap">3일 전</span>
|
||||||
|
</div>
|
||||||
|
<p class="font-body-base text-body-base text-on-surface-variant mb-3">
|
||||||
|
서비스 안정화를 위한 정기 서버 점검이 10월 15일 새벽 2시부터 4시까지 진행됩니다. 해당 시간 동안 서비스 이용이 일시 중단됩니다.
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="px-2 py-0.5 rounded bg-surface-variant text-on-surface-variant font-label-xs text-label-xs">공지사항</span>
|
||||||
|
</div>
|
||||||
|
<a class="text-primary font-label-md text-label-md hover:underline flex items-center gap-1" href="#">
|
||||||
|
자세히 보기 <span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Empty State Illustration (Hidden by default, shown if no results) -->
|
||||||
|
<div class="hidden flex-col items-center justify-center py-24 text-center" id="empty-state">
|
||||||
|
<div class="w-48 h-48 mb-6 opacity-20">
|
||||||
|
<span class="material-symbols-outlined text-[120px] text-primary">notifications_off</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">모든 소식을 확인하셨습니다. 평화로운 하루 되세요!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Floating Action Interaction -->
|
||||||
|
<button class="fixed bottom-8 right-8 w-12 h-12 bg-primary text-on-primary rounded-full shadow-lg flex items-center justify-center opacity-0 transition-opacity duration-300 hover:scale-110 active:scale-95 z-50" id="scrollToTop">
|
||||||
|
<span class="material-symbols-outlined">arrow_upward</span>
|
||||||
|
</button>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
// Scroll to top functionality
|
||||||
|
const scrollBtn = document.getElementById('scrollToTop');
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if (window.scrollY > 300) {
|
||||||
|
scrollBtn.classList.remove('opacity-0');
|
||||||
|
scrollBtn.classList.add('opacity-100');
|
||||||
|
} else {
|
||||||
|
scrollBtn.classList.remove('opacity-100');
|
||||||
|
scrollBtn.classList.add('opacity-0');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
scrollBtn.addEventListener('click', () => {
|
||||||
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hover effect for notification items
|
||||||
|
document.querySelectorAll('.group').forEach(item => {
|
||||||
|
item.addEventListener('mouseenter', () => {
|
||||||
|
item.classList.add('scale-[1.005]');
|
||||||
|
});
|
||||||
|
item.addEventListener('mouseleave', () => {
|
||||||
|
item.classList.remove('scale-[1.005]');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
348
stitch_kintex_ai_system_architect/scr_48_mypage/code.html
Normal file
348
stitch_kintex_ai_system_architect/scr_48_mypage/code.html
Normal file
@ -0,0 +1,348 @@
|
|||||||
|
<!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 AI - My Page Settings</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@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"/>
|
||||||
|
<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": {
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"primary": "#003765",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"outline": "#727781",
|
||||||
|
"surface-dim": "#d3d9f1"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"base": "4px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-lg": "24px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"title-sm": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body { font-family: 'Inter', 'Pretendard', sans-serif; }
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.active-tab-indicator::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
background-color: #003765;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-surface">
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="fixed top-0 right-0 w-[calc(100%-240px)] h-16 bg-surface-bright/80 backdrop-blur-md border-b border-outline-variant z-40 flex justify-between items-center px-container-padding">
|
||||||
|
<div class="flex items-center gap-stack-lg">
|
||||||
|
<h1 class="text-title-sm font-headline-md font-bold text-on-surface">KINTEX AI 전시관리</h1>
|
||||||
|
<div class="flex gap-stack-md ml-stack-lg">
|
||||||
|
<a class="text-primary font-bold border-b-2 border-primary pb-1 text-body-base" href="#">Direct Access</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors text-body-base" href="#">Recent Work</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<div class="flex items-center gap-stack-sm bg-surface-container-low px-stack-md py-1.5 rounded-full border border-outline-variant">
|
||||||
|
<span class="material-symbols-outlined text-outline text-[20px]">search</span>
|
||||||
|
<input class="bg-transparent border-none focus:ring-0 text-body-sm w-48" placeholder="Search..." type="text"/>
|
||||||
|
</div>
|
||||||
|
<button class="material-symbols-outlined p-2 text-on-surface-variant hover:bg-surface-container rounded-full">notifications</button>
|
||||||
|
<button class="material-symbols-outlined p-2 text-on-surface-variant hover:bg-surface-container rounded-full">apps</button>
|
||||||
|
<div class="h-8 w-8 rounded-full bg-primary-container flex items-center justify-center overflow-hidden ml-stack-sm border border-outline-variant">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A professional headshot of a Korean male executive in a corporate setting, soft studio lighting, high resolution photography with a minimalist grey background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCAWH_ikV9RcoZFWF15hokZO_1fvM1Ep4ECY3KJ99qgcJsJ1dVexBTK5s2aYPdzC4jeM5x7ORXC5eDZS1sEvHEBsfDwOmjuooWkW69EMoflMkC5yrxRQQly-oTK3I2-jW8Me4BWtnK26xgRE5py-RO85oKlm-WHtFkPlssSPTZRVH659RZdkP7bzH-ivUxVy-2AOeOuBbcqMalOrIXT33XUGZXJL8a1BiTgjIkNKjA5lOPwpFlZk_rT6nwxWL3SDWhnVzfkSJx-DKY"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<aside class="fixed left-0 top-0 h-screen w-[240px] border-r border-outline-variant bg-surface flex flex-col py-container-padding px-stack-md z-50">
|
||||||
|
<div class="flex items-center gap-stack-sm mb-10 px-stack-sm">
|
||||||
|
<div class="w-8 h-8 bg-primary rounded flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-on-primary text-[20px]">psychology</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-title-sm font-headline-md text-primary">KINTEX AI</div>
|
||||||
|
<div class="text-[10px] uppercase tracking-wider text-outline">전시관리 시스템</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 space-y-1">
|
||||||
|
<a class="flex items-center gap-stack-md text-on-surface-variant hover:text-primary hover:bg-surface-container-low px-stack-md py-stack-sm rounded-xl transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="text-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-md text-on-surface-variant hover:text-primary hover:bg-surface-container-low px-stack-md py-stack-sm rounded-xl transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">groups</span>
|
||||||
|
<span class="text-label-md">Exhibitor Management</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-md text-on-surface-variant hover:text-primary hover:bg-surface-container-low px-stack-md py-stack-sm rounded-xl transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">grid_view</span>
|
||||||
|
<span class="text-label-md">Booth Allocation</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-md text-on-surface-variant hover:text-primary hover:bg-surface-container-low px-stack-md py-stack-sm rounded-xl transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">insights</span>
|
||||||
|
<span class="text-label-md">Smart Analytics</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-md text-on-surface-variant hover:text-primary hover:bg-surface-container-low px-stack-md py-stack-sm rounded-xl transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">psychology</span>
|
||||||
|
<span class="text-label-md">AI Marketing</span>
|
||||||
|
</a>
|
||||||
|
<!-- System Settings Active -->
|
||||||
|
<a class="flex items-center gap-stack-md bg-secondary-container text-on-secondary-container px-stack-md py-stack-sm rounded-xl" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">settings</span>
|
||||||
|
<span class="text-label-md">System Settings</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="mt-auto space-y-1">
|
||||||
|
<a class="flex items-center gap-stack-md text-on-surface-variant hover:text-primary px-stack-md py-stack-sm rounded-xl transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
<span class="text-label-md">Support</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-md text-on-surface-variant hover:text-primary px-stack-md py-stack-sm rounded-xl transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">logout</span>
|
||||||
|
<span class="text-label-md">Sign Out</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Main Content Canvas -->
|
||||||
|
<main class="ml-[240px] pt-16 min-h-screen bg-surface-bright">
|
||||||
|
<div class="max-w-[1200px] mx-auto p-container-padding flex gap-gutter mt-8">
|
||||||
|
<!-- Left Settings Rail -->
|
||||||
|
<aside class="w-64 flex-shrink-0">
|
||||||
|
<h2 class="text-headline-md font-headline-md mb-gutter px-2">설정</h2>
|
||||||
|
<nav class="space-y-1">
|
||||||
|
<button class="w-full flex items-center gap-stack-md px-4 py-3 bg-surface-container-highest text-primary font-semibold relative active-tab-indicator rounded-lg">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">person</span>
|
||||||
|
<span class="text-body-base">프로필</span>
|
||||||
|
</button>
|
||||||
|
<button class="w-full flex items-center gap-stack-md px-4 py-3 text-on-surface-variant hover:bg-surface-container-low rounded-lg transition-colors group">
|
||||||
|
<span class="material-symbols-outlined group-hover:text-primary">verified_user</span>
|
||||||
|
<span class="text-body-base">보안 (2차 인증)</span>
|
||||||
|
</button>
|
||||||
|
<button class="w-full flex items-center gap-stack-md px-4 py-3 text-on-surface-variant hover:bg-surface-container-low rounded-lg transition-colors group">
|
||||||
|
<span class="material-symbols-outlined group-hover:text-primary">notifications</span>
|
||||||
|
<span class="text-body-base">알림 설정</span>
|
||||||
|
</button>
|
||||||
|
<button class="w-full flex items-center gap-stack-md px-4 py-3 text-on-surface-variant hover:bg-surface-container-low rounded-lg transition-colors group">
|
||||||
|
<span class="material-symbols-outlined group-hover:text-primary">translate</span>
|
||||||
|
<span class="text-body-base">테마 · 언어</span>
|
||||||
|
</button>
|
||||||
|
<button class="w-full flex items-center gap-stack-md px-4 py-3 text-on-surface-variant hover:bg-surface-container-low rounded-lg transition-colors group">
|
||||||
|
<span class="material-symbols-outlined group-hover:text-primary">star</span>
|
||||||
|
<span class="text-body-base">즐겨찾기</span>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
<!-- Right Form Panel -->
|
||||||
|
<div class="flex-1 space-y-gutter pb-section-padding">
|
||||||
|
<!-- Profile Section Card -->
|
||||||
|
<section class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden shadow-sm">
|
||||||
|
<div class="p-stack-lg border-l-4 border-primary">
|
||||||
|
<h3 class="text-title-sm font-headline-md mb-stack-lg">기본 프로필 정보</h3>
|
||||||
|
<div class="flex items-start gap-gutter mb-10">
|
||||||
|
<div class="relative">
|
||||||
|
<div class="w-24 h-24 rounded-full border-4 border-surface-container-high overflow-hidden bg-surface-container">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="Close-up portrait of a sharp Korean professional man in his 30s, clear skin, neutral expression, clean aesthetic, high-end photography for corporate profile." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAAeTcHb1Fh2HIGqZT5mUnrSuAubt3ofLw_lI3lohMpB_hrhbamRi680T8V_171X8BZsGuCZZklT4rTa-Xc9wEoxfdFCOfZEhoKzjoy483-EIpqbPE4dVJ5l-mDJj61KECfMnrmj2yuhlLmwKXucbXSMURLb8ydW4xCg5ZVKXWPRTDdvPwIi7psJ9JEhOgv4pZH_qLyWoLSCnZYvYL9QyFu5oDehz5J7Blfewff1QX8iPIzLnFb7Ht56lA9I2k1cHnWg8gle80CJ4A"/>
|
||||||
|
</div>
|
||||||
|
<button class="absolute bottom-0 right-0 w-8 h-8 bg-primary text-on-primary rounded-full flex items-center justify-center border-2 border-surface-container-lowest shadow-md hover:bg-primary-container transition-all">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">edit</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="pt-2">
|
||||||
|
<div class="flex items-center gap-stack-sm mb-1">
|
||||||
|
<span class="text-headline-md font-headline-md">김준호</span>
|
||||||
|
<span class="bg-primary-fixed text-on-primary-fixed text-label-xs px-2 py-0.5 rounded font-bold uppercase tracking-tight">시스템 관리자</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-on-surface-variant text-body-base">사용자 프로필 사진 및 기본 직무 정보를 관리할 수 있습니다.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-gutter max-w-2xl">
|
||||||
|
<div class="space-y-base">
|
||||||
|
<label class="text-label-md text-on-surface">이름</label>
|
||||||
|
<input class="w-full bg-surface-bright border border-outline-variant px-stack-md py-2.5 rounded text-body-base focus:ring-2 focus:ring-primary/20 outline-none" type="text" value="김준호"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-base">
|
||||||
|
<label class="text-label-md text-on-surface">소속 부서</label>
|
||||||
|
<input class="w-full bg-surface-bright border border-outline-variant px-stack-md py-2.5 rounded text-body-base focus:ring-2 focus:ring-primary/20 outline-none" type="text" value="전략운영본부 AI센터"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-base col-span-2">
|
||||||
|
<label class="text-label-md text-on-surface">이메일 주소</label>
|
||||||
|
<input class="w-full bg-surface-bright border border-outline-variant px-stack-md py-2.5 rounded text-body-base focus:ring-2 focus:ring-primary/20 outline-none" type="email" value="jh.kim@kintex-ai.co.kr"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Theme & Language Section Card -->
|
||||||
|
<section class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden shadow-sm">
|
||||||
|
<div class="p-stack-lg border-l-4 border-secondary">
|
||||||
|
<h3 class="text-title-sm font-headline-md mb-stack-lg">테마 및 언어 설정</h3>
|
||||||
|
<!-- Theme Selection -->
|
||||||
|
<div class="mb-gutter">
|
||||||
|
<label class="text-label-md text-on-surface-variant block mb-stack-md">애플리케이션 테마</label>
|
||||||
|
<div class="flex gap-gutter">
|
||||||
|
<!-- Light Mode Option -->
|
||||||
|
<label class="relative flex-1 cursor-pointer group">
|
||||||
|
<input checked="" class="peer hidden" name="theme" type="radio"/>
|
||||||
|
<div class="border-2 border-outline-variant rounded-xl overflow-hidden peer-checked:border-primary group-hover:border-primary/50 transition-all">
|
||||||
|
<div class="h-24 bg-surface-bright flex p-2 gap-2">
|
||||||
|
<div class="w-12 h-full bg-white rounded border border-outline-variant"></div>
|
||||||
|
<div class="flex-1 space-y-1">
|
||||||
|
<div class="h-2 w-full bg-outline-variant rounded"></div>
|
||||||
|
<div class="h-2 w-2/3 bg-outline-variant rounded"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 text-center bg-surface-container text-body-base font-medium">Light Mode</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute top-2 right-2 w-5 h-5 bg-primary text-on-primary rounded-full flex items-center justify-center opacity-0 peer-checked:opacity-100">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'wght' 700;">check</span>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<!-- Dark Mode Option -->
|
||||||
|
<label class="relative flex-1 cursor-pointer group">
|
||||||
|
<input class="peer hidden" name="theme" type="radio"/>
|
||||||
|
<div class="border-2 border-outline-variant rounded-xl overflow-hidden peer-checked:border-primary group-hover:border-primary/50 transition-all">
|
||||||
|
<div class="h-24 bg-inverse-surface flex p-2 gap-2">
|
||||||
|
<div class="w-12 h-full bg-surface-container-low rounded border border-white/10"></div>
|
||||||
|
<div class="flex-1 space-y-1">
|
||||||
|
<div class="h-2 w-full bg-white/20 rounded"></div>
|
||||||
|
<div class="h-2 w-2/3 bg-white/20 rounded"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 text-center bg-surface-container-high text-body-base font-medium">Dark Mode</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute top-2 right-2 w-5 h-5 bg-primary text-on-primary rounded-full flex items-center justify-center opacity-0 peer-checked:opacity-100">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'wght' 700;">check</span>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Language Selection -->
|
||||||
|
<div class="pt-gutter">
|
||||||
|
<label class="text-label-md text-on-surface-variant block mb-stack-md">시스템 언어</label>
|
||||||
|
<div class="flex flex-wrap gap-stack-sm">
|
||||||
|
<button class="px-gutter py-2.5 bg-primary text-on-primary rounded font-bold text-body-base shadow-sm">한국어</button>
|
||||||
|
<button class="px-gutter py-2.5 bg-surface-container border border-outline-variant hover:bg-surface-container-high rounded text-body-base transition-colors">English</button>
|
||||||
|
<button class="px-gutter py-2.5 bg-surface-container border border-outline-variant hover:bg-surface-container-high rounded text-body-base transition-colors">日本語</button>
|
||||||
|
<button class="px-gutter py-2.5 bg-surface-container border border-outline-variant hover:bg-surface-container-high rounded text-body-base transition-colors">简体中文</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Action Footer -->
|
||||||
|
<div class="flex justify-end gap-stack-md pt-stack-lg">
|
||||||
|
<button class="px-8 py-3 text-on-surface-variant font-semibold hover:bg-surface-container-low rounded transition-colors">초기화</button>
|
||||||
|
<button class="px-10 py-3 bg-[#0066B3] hover:bg-[#005596] text-white font-bold rounded shadow-lg transition-all active:scale-95 flex items-center gap-stack-sm">
|
||||||
|
<span>변경사항 저장</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]">save</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
// Simple micro-interaction for theme selection
|
||||||
|
const radioButtons = document.querySelectorAll('input[name="theme"]');
|
||||||
|
radioButtons.forEach(radio => {
|
||||||
|
radio.addEventListener('change', (e) => {
|
||||||
|
if(e.target.nextElementSibling.innerText.includes('Dark')) {
|
||||||
|
console.log('Switching to Dark (Visual Mock only)');
|
||||||
|
} else {
|
||||||
|
console.log('Switching to Light');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Tab switching logic (UI only)
|
||||||
|
const tabs = document.querySelectorAll('aside nav button');
|
||||||
|
tabs.forEach(tab => {
|
||||||
|
tab.addEventListener('click', () => {
|
||||||
|
tabs.forEach(t => {
|
||||||
|
t.classList.remove('bg-surface-container-highest', 'text-primary', 'font-semibold', 'active-tab-indicator');
|
||||||
|
t.classList.add('text-on-surface-variant');
|
||||||
|
});
|
||||||
|
tab.classList.add('bg-surface-container-highest', 'text-primary', 'font-semibold', 'active-tab-indicator');
|
||||||
|
tab.classList.remove('text-on-surface-variant');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
327
stitch_kintex_ai_system_architect/scr_49_signup/code.html
Normal file
327
stitch_kintex_ai_system_architect/scr_49_signup/code.html
Normal file
@ -0,0 +1,327 @@
|
|||||||
|
<!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 Registration - Sign Up</title>
|
||||||
|
<!-- Material Symbols for Icons -->
|
||||||
|
<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"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter:wght@100..900&display=swap" rel="stylesheet"/>
|
||||||
|
<!-- Tailwind CSS -->
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<!-- Tailwind Configuration -->
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"outline": "#727781",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"outline-variant": "#c2c7d1",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"primary": "#003765",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"on-primary-fixed": "#001c38"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"base": "4px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"label-xs": ["Geist"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #F9FAFB;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
.glass-effect {
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
background: rgba(255, 255, 255, 0.85);
|
||||||
|
}
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
input::placeholder {
|
||||||
|
color: #9ca3af;
|
||||||
|
}
|
||||||
|
.step-active {
|
||||||
|
color: #003765;
|
||||||
|
font-weight: 700;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.step-active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -4px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #003765;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="text-on-surface">
|
||||||
|
<!-- Top Navigation Bar -->
|
||||||
|
<header class="sticky top-0 z-50 bg-surface-container-lowest border-b border-outline-variant shadow-sm h-16">
|
||||||
|
<div class="flex justify-between items-center w-full px-container-padding max-w-[1280px] mx-auto h-full">
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<img alt="KINTEX Logo" class="h-8" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDOnH-1RFQG3bW-j1S6XSV-z5nijrlVp46lNMVbTvGAKK5lck9rlykCs2IyjH1LZeIDi93RK7c_sOVh6vrTcx0i8fQ4R9s1zM7LyleKBz1V7aDH5xwjqiAc0OnGGYEBQjxsHhtZcg7XKmJP4i813TyR9jQIRfzT7nQVs_XAH6o2jAHftIlBatl-mAcXjqsqq3wWoZNL72Jn4vmcTFBw4d5oepkARycVyOgT2saT668as_96iRES1OoEoOhK7ZXA1AhKbBLXva8vpJY"/>
|
||||||
|
<span class="font-headline-md text-headline-md font-bold text-primary">AI 전시관리</span>
|
||||||
|
</div>
|
||||||
|
<nav class="hidden md:flex gap-8 items-center">
|
||||||
|
<a class="font-body-base text-body-base text-on-surface-variant font-medium hover:text-primary transition-colors" href="#">Exhibitions</a>
|
||||||
|
<a class="font-body-base text-body-base text-on-surface-variant font-medium hover:text-primary transition-colors" href="#">Venue Info</a>
|
||||||
|
<a class="font-body-base text-body-base text-on-surface-variant font-medium hover:text-primary transition-colors" href="#">Support</a>
|
||||||
|
<button class="bg-primary text-on-primary px-6 py-2 rounded-lg font-label-md hover:bg-primary-container transition-all">Check Status</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="min-h-screen py-section-padding flex flex-col items-center justify-center px-container-padding">
|
||||||
|
<!-- Registration Container -->
|
||||||
|
<div class="w-full max-w-[720px] bg-surface-container-lowest rounded-xl shadow-md border border-outline-variant overflow-hidden">
|
||||||
|
<!-- Progress Bar Section -->
|
||||||
|
<div class="bg-surface-container-low px-12 py-8 border-b border-outline-variant">
|
||||||
|
<div class="flex justify-between items-center max-w-md mx-auto relative">
|
||||||
|
<div class="flex flex-col items-center gap-2 step-active">
|
||||||
|
<span class="text-label-md">유형</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow h-[1px] bg-outline-variant mx-4 mt-[-4px]"></div>
|
||||||
|
<div class="flex flex-col items-center gap-2 text-on-surface-variant">
|
||||||
|
<span class="text-label-md">정보</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow h-[1px] bg-outline-variant mx-4 mt-[-4px]"></div>
|
||||||
|
<div class="flex flex-col items-center gap-2 text-on-surface-variant">
|
||||||
|
<span class="text-label-md">인증</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow h-[1px] bg-outline-variant mx-4 mt-[-4px]"></div>
|
||||||
|
<div class="flex flex-col items-center gap-2 text-on-surface-variant">
|
||||||
|
<span class="text-label-md">완료</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-12 space-y-12">
|
||||||
|
<!-- Step 1: Type Selection -->
|
||||||
|
<section>
|
||||||
|
<h2 class="font-headline-md text-headline-md text-center mb-8">회원 유형을 선택해 주세요</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-stack-md">
|
||||||
|
<!-- Exhibitor -->
|
||||||
|
<label class="relative cursor-pointer group">
|
||||||
|
<input checked="" class="peer sr-only" name="member_type" type="radio"/>
|
||||||
|
<div class="flex flex-col items-center justify-center p-6 border border-outline-variant rounded-xl group-hover:bg-primary-fixed transition-all peer-checked:border-primary peer-checked:ring-2 peer-checked:ring-primary h-full">
|
||||||
|
<span class="material-symbols-outlined text-4xl mb-4 text-primary" style="font-variation-settings: 'FILL' 0;">business_center</span>
|
||||||
|
<span class="font-title-sm text-title-sm">참가업체</span>
|
||||||
|
<span class="font-body-sm text-body-sm text-on-surface-variant text-center mt-2">전시 부스 참가 및 운영</span>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<!-- Contractor -->
|
||||||
|
<label class="relative cursor-pointer group">
|
||||||
|
<input class="peer sr-only" name="member_type" type="radio"/>
|
||||||
|
<div class="flex flex-col items-center justify-center p-6 border border-outline-variant rounded-xl group-hover:bg-primary-fixed transition-all peer-checked:border-primary peer-checked:ring-2 peer-checked:ring-primary h-full">
|
||||||
|
<span class="material-symbols-outlined text-4xl mb-4 text-primary" style="font-variation-settings: 'FILL' 0;">construction</span>
|
||||||
|
<span class="font-title-sm text-title-sm">등록(장치)업체</span>
|
||||||
|
<span class="font-body-sm text-body-sm text-on-surface-variant text-center mt-2">장치 공사 및 유지보수</span>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<!-- Visitor -->
|
||||||
|
<label class="relative cursor-pointer group">
|
||||||
|
<input class="peer sr-only" name="member_type" type="radio"/>
|
||||||
|
<div class="flex flex-col items-center justify-center p-6 border border-outline-variant rounded-xl group-hover:bg-primary-fixed transition-all peer-checked:border-primary peer-checked:ring-2 peer-checked:ring-primary h-full">
|
||||||
|
<span class="material-symbols-outlined text-4xl mb-4 text-primary" style="font-variation-settings: 'FILL' 0;">groups</span>
|
||||||
|
<span class="font-title-sm text-title-sm">관람객</span>
|
||||||
|
<span class="font-body-sm text-body-sm text-on-surface-variant text-center mt-2">전시회 참관 및 이벤트</span>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<p class="text-center mt-4 font-body-sm text-body-sm text-primary italic">* 킨텍스 등록업체만 가입 가능합니다.</p>
|
||||||
|
</section>
|
||||||
|
<hr class="border-outline-variant"/>
|
||||||
|
<!-- Sign-up Form -->
|
||||||
|
<section class="space-y-6">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-md">
|
||||||
|
<!-- Name -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-md text-label-md block">이름</label>
|
||||||
|
<input class="w-full border-outline-variant rounded-lg p-3 bg-surface-bright focus:ring-primary focus:border-primary" placeholder="성함을 입력하세요" type="text"/>
|
||||||
|
</div>
|
||||||
|
<!-- Email + Verification -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-md text-label-md block">이메일</label>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<input class="flex-grow border-outline-variant rounded-lg p-3 bg-surface-bright focus:ring-primary focus:border-primary" placeholder="example@email.com" type="email"/>
|
||||||
|
<button class="bg-surface-container-high border border-outline-variant text-primary font-label-md px-4 rounded-lg hover:bg-surface-container-highest transition-all whitespace-nowrap" type="button">인증코드 발송</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-md">
|
||||||
|
<!-- Password -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-md text-label-md block">비밀번호</label>
|
||||||
|
<input class="w-full border-outline-variant rounded-lg p-3 bg-surface-bright focus:ring-primary focus:border-primary" placeholder="8~16자 영문, 숫자, 특수문자" type="password"/>
|
||||||
|
</div>
|
||||||
|
<!-- Password Confirm -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-md text-label-md block">비밀번호 확인</label>
|
||||||
|
<input class="w-full border-outline-variant rounded-lg p-3 bg-surface-bright focus:ring-primary focus:border-primary" placeholder="비밀번호 재입력" type="password"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-md">
|
||||||
|
<!-- Company Name -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-md text-label-md block">업체명</label>
|
||||||
|
<input class="w-full border-outline-variant rounded-lg p-3 bg-surface-bright focus:ring-primary focus:border-primary" placeholder="사업자등록증 상의 업체명" type="text"/>
|
||||||
|
</div>
|
||||||
|
<!-- Business Number -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-md text-label-md block">사업자등록번호</label>
|
||||||
|
<input class="w-full border-outline-variant rounded-lg p-3 bg-surface-bright focus:ring-primary focus:border-primary" placeholder="000-00-00000" type="text"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Consents -->
|
||||||
|
<div class="pt-4 space-y-3">
|
||||||
|
<label class="flex items-start gap-3 cursor-pointer group">
|
||||||
|
<input class="mt-1 rounded text-primary focus:ring-primary border-outline-variant" type="checkbox"/>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="font-body-base text-body-base font-medium">전체 동의하기</span>
|
||||||
|
<span class="font-body-sm text-body-sm text-on-surface-variant">이용약관 및 개인정보 처리방침에 모두 동의합니다.</span>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<div class="pl-8 space-y-2">
|
||||||
|
<label class="flex items-center justify-between text-on-surface-variant cursor-pointer">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<input class="rounded text-primary focus:ring-primary border-outline-variant" type="checkbox"/>
|
||||||
|
<span class="font-body-sm text-body-sm">이용약관 동의 (필수)</span>
|
||||||
|
</div>
|
||||||
|
<button class="text-label-xs underline hover:text-primary transition-colors" type="button">보기</button>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center justify-between text-on-surface-variant cursor-pointer">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<input class="rounded text-primary focus:ring-primary border-outline-variant" type="checkbox"/>
|
||||||
|
<span class="font-body-sm text-body-sm">개인정보 처리방침 동의 (필수)</span>
|
||||||
|
</div>
|
||||||
|
<button class="text-label-xs underline hover:text-primary transition-colors" type="button">보기</button>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Final Action -->
|
||||||
|
<div class="pt-6">
|
||||||
|
<button class="w-full bg-[#0066B3] text-on-primary py-4 rounded-lg font-headline-md hover:bg-[#004e8b] transition-all shadow-md active:scale-[0.98]">가입하기</button>
|
||||||
|
<div class="text-center mt-6">
|
||||||
|
<span class="font-body-sm text-body-sm text-on-surface-variant">이미 계정이 있으신가요?</span>
|
||||||
|
<a class="font-body-sm text-body-sm text-primary font-bold ml-2 hover:underline" href="#">로그인하기</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Decorative Background Asset -->
|
||||||
|
<div class="fixed inset-0 -z-10 opacity-5 pointer-events-none overflow-hidden">
|
||||||
|
<div class="absolute top-0 right-0 w-1/2 h-full bg-primary-container blur-[120px] rounded-full translate-x-1/2 -translate-y-1/2"></div>
|
||||||
|
<div class="absolute bottom-0 left-0 w-1/2 h-full bg-secondary-container blur-[120px] rounded-full -translate-x-1/2 translate-y-1/2"></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="w-full bg-surface-container-high 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 flex-col items-center md:items-start gap-1">
|
||||||
|
<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 flex-wrap justify-center gap-6">
|
||||||
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary underline transition-all" href="#">Privacy Policy</a>
|
||||||
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary underline transition-all" href="#">Terms of Service</a>
|
||||||
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary underline transition-all" href="#">Contact Us</a>
|
||||||
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary underline transition-all" href="#">Exhibition Schedule</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
// Micro-interaction for radio cards
|
||||||
|
const typeCards = document.querySelectorAll('input[name="member_type"]');
|
||||||
|
typeCards.forEach(card => {
|
||||||
|
card.addEventListener('change', () => {
|
||||||
|
// Visual feedback logic if needed
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Form validation placeholder
|
||||||
|
const submitBtn = document.querySelector('button.bg-\\[\\#0066B3\\]');
|
||||||
|
submitBtn.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
// Implementation of validation or step progression would go here
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,279 @@
|
|||||||
|
<!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 AI 전시관리</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@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-bright": "#faf8ff",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"outline-variant": "#c2c7d1",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"outline": "#727781",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"primary": "#003765",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-error": "#ffffff"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-lg": "24px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"display-lg-mobile": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.strength-meter-segment {
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: #e5e7eb;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
.step-active {
|
||||||
|
border-bottom: 2px solid #003765;
|
||||||
|
color: #003765;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.glass-effect {
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright min-h-screen flex flex-col font-body-base text-on-surface">
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-container-padding h-16 bg-surface-bright dark:bg-inverse-surface border-b border-outline-variant">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="text-headline-md font-headline-md font-bold text-primary dark:text-inverse-primary tracking-tight">KINTEX AI 전시관리</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<button class="p-2 hover:bg-surface-container dark:hover:bg-surface-container-high transition-colors rounded-full text-on-surface-variant dark:text-on-surface-variant active:opacity-80">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-2 hover:bg-surface-container dark:hover:bg-surface-container-high transition-colors rounded-full text-on-surface-variant dark:text-on-surface-variant active:opacity-80">
|
||||||
|
<span class="material-symbols-outlined">language</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Content Canvas -->
|
||||||
|
<main class="flex-grow flex items-center justify-center pt-16 pb-24 px-container-padding">
|
||||||
|
<div class="w-full max-w-[480px]">
|
||||||
|
<!-- Password Reset Card -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant shadow-md rounded-xl p-8 md:p-10 transition-all">
|
||||||
|
<!-- 3-Step Progress Indicator -->
|
||||||
|
<nav class="flex justify-between items-center mb-10 border-b border-outline-variant">
|
||||||
|
<div class="flex-1 text-center pb-3 step-active text-body-sm font-label-md">이메일 확인</div>
|
||||||
|
<div class="flex-1 text-center pb-3 text-on-surface-variant text-body-sm font-label-md">인증코드</div>
|
||||||
|
<div class="flex-1 text-center pb-3 text-on-surface-variant text-body-sm font-label-md">새 비밀번호</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Header Section -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<h1 class="text-headline-md font-headline-md text-on-surface mb-2">비밀번호 재설정</h1>
|
||||||
|
<p class="text-body-sm text-on-surface-variant leading-relaxed">가입하신 이메일로 비밀번호 재설정 링크 또는 인증코드를 보내드립니다.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Auth Form -->
|
||||||
|
<form class="space-y-6" onsubmit="return false;">
|
||||||
|
<!-- Email Input -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="block text-label-md text-on-surface-variant ml-1">이메일 주소</label>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<div class="relative flex-grow">
|
||||||
|
<input class="w-full h-12 px-4 rounded-lg border border-outline-variant bg-surface-container-low focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all text-body-base" placeholder="example@kintex.com" type="email"/>
|
||||||
|
</div>
|
||||||
|
<button class="h-12 px-4 bg-primary-container text-on-primary-container font-label-md rounded-lg hover:bg-primary-container/90 active:scale-95 transition-all whitespace-nowrap">
|
||||||
|
인증코드 발송
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Verification Code Input -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="flex justify-between items-end ml-1">
|
||||||
|
<label class="block text-label-md text-on-surface-variant">인증코드 (6자리)</label>
|
||||||
|
<span class="text-label-md font-medium text-error flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">timer</span> 02:58
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<input class="w-full h-12 px-4 rounded-lg border border-outline-variant bg-surface-container-low focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all text-body-base tracking-[0.5em] text-center font-bold" maxlength="6" placeholder="000000" type="text"/>
|
||||||
|
<div class="flex justify-end pt-1">
|
||||||
|
<button class="text-label-xs text-primary underline hover:text-primary-container transition-colors" type="button">인증코드 재발송</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- New Password Input -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="block text-label-md text-on-surface-variant ml-1">새 비밀번호</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input class="w-full h-12 px-4 rounded-lg border border-outline-variant bg-surface-container-low focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all text-body-base" placeholder="8-20자 영문, 숫자, 특수문자 조합" type="password"/>
|
||||||
|
<button class="absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant" type="button">
|
||||||
|
<span class="material-symbols-outlined">visibility</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Strength Meter -->
|
||||||
|
<div class="grid grid-cols-3 gap-2 px-1 pt-1">
|
||||||
|
<div class="strength-meter-segment bg-secondary-container"></div>
|
||||||
|
<div class="strength-meter-segment bg-secondary-container"></div>
|
||||||
|
<div class="strength-meter-segment"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center px-1">
|
||||||
|
<span class="text-label-xs text-secondary-container">안전도: 보통</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Password Confirm Input -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="block text-label-md text-on-surface-variant ml-1">비밀번호 확인</label>
|
||||||
|
<input class="w-full h-12 px-4 rounded-lg border border-outline-variant bg-surface-container-low focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all text-body-base" placeholder="비밀번호를 한번 더 입력해주세요" type="password"/>
|
||||||
|
</div>
|
||||||
|
<!-- Primary Action -->
|
||||||
|
<button class="w-full h-14 mt-4 bg-primary text-on-primary font-title-sm rounded-lg hover:bg-primary-container transition-all active:scale-95 shadow-sm" type="submit">
|
||||||
|
비밀번호 재설정
|
||||||
|
</button>
|
||||||
|
<!-- Safety Note -->
|
||||||
|
<p class="text-center text-label-xs text-on-surface-variant opacity-70 mt-4 leading-relaxed">
|
||||||
|
연속된 인증 실패 시 계정이 일시적으로 잠길 수 있습니다.
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<!-- Return Link -->
|
||||||
|
<div class="text-center mt-8">
|
||||||
|
<a class="text-body-sm text-on-surface-variant hover:text-primary transition-colors flex items-center justify-center gap-1" href="#">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">arrow_back</span>
|
||||||
|
로그인 화면으로 돌아가기
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="w-full py-stack-lg px-container-padding flex flex-col md:flex-row justify-between items-center gap-base bg-surface-bright dark:bg-inverse-surface border-t border-outline-variant">
|
||||||
|
<div class="flex flex-col md:flex-row items-center gap-stack-md">
|
||||||
|
<span class="text-label-md font-label-md text-on-surface-variant">© 2024 KINTEX AI 전시관리. All rights reserved.</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-stack-lg mt-4 md:mt-0">
|
||||||
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-secondary transition-colors active:scale-95" href="#">Privacy Policy</a>
|
||||||
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-secondary transition-colors active:scale-95" href="#">Terms of Service</a>
|
||||||
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-secondary transition-colors active:scale-95" href="#">Contact Support</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
// Micro-interaction for password strength meter simulation
|
||||||
|
const passwordInput = document.querySelector('input[type="password"]');
|
||||||
|
const segments = document.querySelectorAll('.strength-meter-segment');
|
||||||
|
const strengthLabel = document.querySelector('.text-label-xs.text-secondary-container');
|
||||||
|
|
||||||
|
passwordInput.addEventListener('input', (e) => {
|
||||||
|
const val = e.target.value;
|
||||||
|
if (val.length === 0) {
|
||||||
|
segments.forEach(s => s.style.backgroundColor = '#e5e7eb');
|
||||||
|
strengthLabel.innerText = '비밀번호를 입력하세요';
|
||||||
|
} else if (val.length < 5) {
|
||||||
|
segments[0].style.backgroundColor = '#ba1a1a';
|
||||||
|
segments[1].style.backgroundColor = '#e5e7eb';
|
||||||
|
segments[2].style.backgroundColor = '#e5e7eb';
|
||||||
|
strengthLabel.innerText = '안전도: 위험';
|
||||||
|
strengthLabel.style.color = '#ba1a1a';
|
||||||
|
} else if (val.length < 10) {
|
||||||
|
segments[0].style.backgroundColor = '#6d4aff';
|
||||||
|
segments[1].style.backgroundColor = '#6d4aff';
|
||||||
|
segments[2].style.backgroundColor = '#e5e7eb';
|
||||||
|
strengthLabel.innerText = '안전도: 보통';
|
||||||
|
strengthLabel.style.color = '#6d4aff';
|
||||||
|
} else {
|
||||||
|
segments[0].style.backgroundColor = '#00583b';
|
||||||
|
segments[1].style.backgroundColor = '#00583b';
|
||||||
|
segments[2].style.backgroundColor = '#00583b';
|
||||||
|
strengthLabel.innerText = '안전도: 강력';
|
||||||
|
strengthLabel.style.color = '#00583b';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Toggle Password Visibility
|
||||||
|
const toggleBtn = document.querySelector('button .material-symbols-outlined');
|
||||||
|
toggleBtn?.parentElement.addEventListener('click', () => {
|
||||||
|
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
|
||||||
|
passwordInput.setAttribute('type', type);
|
||||||
|
toggleBtn.textContent = type === 'password' ? 'visibility' : 'visibility_off';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
258
stitch_kintex_ai_system_architect/scr_51_otp_setup/code.html
Normal file
258
stitch_kintex_ai_system_architect/scr_51_otp_setup/code.html
Normal file
@ -0,0 +1,258 @@
|
|||||||
|
<!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 AI - 2차 인증(OTP) 등록</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": {
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"outline-variant": "#c2c7d1",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"primary": "#003765",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"outline": "#727781",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"error-container": "#ffdad6"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"gutter": "16px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"section-padding": "96px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"display-lg-mobile": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"title-sm": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.otp-input:focus {
|
||||||
|
outline: 2px solid #003765;
|
||||||
|
outline-offset: -1px;
|
||||||
|
}
|
||||||
|
.glass-effect {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#F9FAFB] text-on-surface min-h-screen flex flex-col font-body-base">
|
||||||
|
<!-- TopAppBar (Based on Shared Components) -->
|
||||||
|
<header class="bg-surface-bright flex justify-between items-center h-16 px-container-padding border-b border-outline-variant sticky top-0 z-50">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<h1 class="font-headline-md text-headline-md font-bold text-primary">계정 설정</h1>
|
||||||
|
<div class="h-6 w-[1px] bg-outline-variant"></div>
|
||||||
|
<span class="font-title-sm text-title-sm text-on-surface-variant">KINTEX AI 전시관리</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<nav class="hidden md:flex items-center gap-6 mr-6">
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-all" href="#">Profile</a>
|
||||||
|
<a class="font-label-md text-label-md text-primary border-b-2 border-primary pb-1" href="#">Security</a>
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-all" href="#">Preferences</a>
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-all" href="#">Billing</a>
|
||||||
|
</nav>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high rounded-full transition-colors opacity-80 hover:opacity-100">
|
||||||
|
<span class="material-symbols-outlined">notifications</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high rounded-full transition-colors opacity-80 hover:opacity-100">
|
||||||
|
<span class="material-symbols-outlined">apps</span>
|
||||||
|
</button>
|
||||||
|
<div class="w-8 h-8 rounded-full overflow-hidden border border-outline-variant ml-2">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A professional headshot of a Korean corporate administrator, mid-40s, wearing a clean suit, looking directly at the camera with a helpful and serious expression. The lighting is bright and corporate, reflecting a high-tech management environment with soft blue tones in the background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAIXydEb_odTrZJftO7roDi5boMphTJw-qzB1-a_jmnRgXPSl85L7AfTC_liBnJDOc1qJZme3LrJv0qhy9WG33F767_9zBpUTcLB6sOHnj3wSpSZpJ9sTUNsODC73Wu-IepWXmiZXAbboFop0hYLX5CNnBskO3hrzVxKoywy-xLEn_GiNH3b9eBaVsal9PqRv_IJngCTyB0wZc3NJzLi1Hrj3wfeJmpRN8T_eAbrcIXT1HduMfRrloNRokKkMDMB1O9fvYAqvDJYmA"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="flex-grow flex items-center justify-center py-section-padding px-gutter">
|
||||||
|
<!-- Centered Security Card -->
|
||||||
|
<div class="w-full max-w-[520px] bg-surface-container-lowest border border-outline-variant rounded-xl shadow-sm overflow-hidden">
|
||||||
|
<!-- Card Header -->
|
||||||
|
<div class="p-stack-lg text-center border-b border-outline-variant bg-surface-container-low/30">
|
||||||
|
<div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary-container/10 mb-stack-md">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[32px]" style="font-variation-settings: 'FILL' 1;">shield_person</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="font-display-lg text-headline-md text-primary block">2차 인증(OTP) 등록</h2>
|
||||||
|
<p class="text-on-surface-variant text-body-sm mt-1">계정 보안을 위해 모바일 OTP를 설정해 주세요.</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-lg space-y-8">
|
||||||
|
<!-- Step 1: QR Scan -->
|
||||||
|
<section>
|
||||||
|
<div class="flex items-center gap-2 mb-stack-md">
|
||||||
|
<span class="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-[12px] font-bold">1</span>
|
||||||
|
<h3 class="font-title-sm text-on-surface">인증 앱으로 QR을 스캔하세요</h3>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div class="p-4 bg-white border border-outline-variant rounded-xl shadow-inner mb-stack-md">
|
||||||
|
<img alt="OTP Setup QR Code" class="w-48 h-48" src="https://lh3.googleusercontent.com/aida/AP1WRLvDs6aWHe4i0oIV0Hx9MFtEvq-t7h_LoKNITCXVL3IlM1XfmHfisUMAxMH_vgxIBpSVrxlBje68DIVcnrGn0ylKObNz5_dXfJlk693IIRtkM3Bb9dWQr7QoNEkIUT66A4H8y2GFlef1bhkWdkjma79r5l5Hdncxk20Bh2LksOCKHtT2Pf-EwMAHS73oxIjHsEGU5I5KoD-rJo84ZKDgAYSshiGFyUTTwqgMWUa-hwO5qrAWM6-kR__ascU"/>
|
||||||
|
</div>
|
||||||
|
<div class="w-full">
|
||||||
|
<p class="text-label-xs text-on-surface-variant mb-1 ml-1 uppercase tracking-wider font-bold">Secret Key</p>
|
||||||
|
<div class="flex items-center gap-2 p-3 bg-surface-container-low border border-outline-variant rounded-lg">
|
||||||
|
<code class="flex-grow font-mono font-bold text-primary tracking-widest text-center">ABCD 1234 EFGH 5678</code>
|
||||||
|
<button class="p-2 text-primary hover:bg-primary/10 rounded-md transition-colors" title="Copy Key">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">content_copy</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Divider -->
|
||||||
|
<div class="flex items-center gap-4 text-outline">
|
||||||
|
<div class="h-[1px] flex-grow bg-outline-variant"></div>
|
||||||
|
<span class="material-symbols-outlined text-sm">keyboard_double_arrow_down</span>
|
||||||
|
<div class="h-[1px] flex-grow bg-outline-variant"></div>
|
||||||
|
</div>
|
||||||
|
<!-- Step 2: Code Input -->
|
||||||
|
<section>
|
||||||
|
<div class="flex items-center gap-2 mb-stack-md">
|
||||||
|
<span class="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-[12px] font-bold">2</span>
|
||||||
|
<h3 class="font-title-sm text-on-surface">6자리 코드 입력</h3>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-center items-center gap-3" id="otp-container">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<input class="otp-input w-12 h-14 text-center text-headline-md font-bold rounded-lg border-outline-variant bg-surface-container-lowest focus:ring-0 focus:border-primary transition-all" maxlength="1" placeholder="0" type="text"/>
|
||||||
|
<input class="otp-input w-12 h-14 text-center text-headline-md font-bold rounded-lg border-outline-variant bg-surface-container-lowest focus:ring-0 focus:border-primary transition-all" maxlength="1" placeholder="0" type="text"/>
|
||||||
|
<input class="otp-input w-12 h-14 text-center text-headline-md font-bold rounded-lg border-outline-variant bg-surface-container-lowest focus:ring-0 focus:border-primary transition-all" maxlength="1" placeholder="0" type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="w-4 h-[2px] bg-outline-variant"></div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<input class="otp-input w-12 h-14 text-center text-headline-md font-bold rounded-lg border-outline-variant bg-surface-container-lowest focus:ring-0 focus:border-primary transition-all" maxlength="1" placeholder="0" type="text"/>
|
||||||
|
<input class="otp-input w-12 h-14 text-center text-headline-md font-bold rounded-lg border-outline-variant bg-surface-container-lowest focus:ring-0 focus:border-primary transition-all" maxlength="1" placeholder="0" type="text"/>
|
||||||
|
<input class="otp-input w-12 h-14 text-center text-headline-md font-bold rounded-lg border-outline-variant bg-surface-container-lowest focus:ring-0 focus:border-primary transition-all" maxlength="1" placeholder="0" type="text"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- CTA Action -->
|
||||||
|
<div class="pt-4">
|
||||||
|
<button class="w-full bg-primary text-on-primary font-bold py-4 rounded-xl hover:bg-primary-container transition-all active:scale-[0.98] shadow-md hover:shadow-lg flex items-center justify-center gap-2">
|
||||||
|
<span>등록 완료</span>
|
||||||
|
<span class="material-symbols-outlined">verified_user</span>
|
||||||
|
</button>
|
||||||
|
<div class="mt-stack-md flex items-start gap-2 p-3 bg-surface-container rounded-lg">
|
||||||
|
<span class="material-symbols-outlined text-primary-container text-[20px]">info</span>
|
||||||
|
<p class="text-label-xs text-on-surface-variant leading-tight">
|
||||||
|
Google Authenticator, Microsoft Authenticator 등 표준 TOTP를 지원하는 모든 인증 앱을 사용할 수 있습니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Footer (Based on Shared Components) -->
|
||||||
|
<footer class="bg-surface-container-low flex flex-col md:flex-row justify-between items-center py-6 px-container-padding border-t border-outline-variant mt-stack-lg">
|
||||||
|
<div class="flex flex-col md:items-start items-center gap-1 mb-4 md:mb-0">
|
||||||
|
<span class="font-bold text-primary">KINTEX AI</span>
|
||||||
|
<p class="font-label-xs text-label-xs text-on-surface-variant">
|
||||||
|
© 2024 KINTEX AI Exhibition Management. All rights reserved.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-6">
|
||||||
|
<a class="font-label-xs text-label-xs text-on-surface-variant hover:underline cursor-pointer" href="#">Privacy Policy</a>
|
||||||
|
<a class="font-label-xs text-label-xs text-on-surface-variant hover:underline cursor-pointer" href="#">Terms of Service</a>
|
||||||
|
<a class="font-label-xs text-label-xs text-on-surface-variant hover:underline cursor-pointer" href="#">Security Compliance</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
// Simple micro-interaction for OTP inputs
|
||||||
|
const inputs = document.querySelectorAll('.otp-input');
|
||||||
|
inputs.forEach((input, index) => {
|
||||||
|
input.addEventListener('input', (e) => {
|
||||||
|
if (e.target.value.length === 1 && index < inputs.length - 1) {
|
||||||
|
inputs[index + 1].focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
input.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Backspace' && !e.target.value && index > 0) {
|
||||||
|
inputs[index - 1].focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Highlight active container
|
||||||
|
input.addEventListener('focus', () => {
|
||||||
|
input.parentElement.classList.add('ring-2', 'ring-primary/10', 'rounded-lg');
|
||||||
|
});
|
||||||
|
input.addEventListener('blur', () => {
|
||||||
|
input.parentElement.classList.remove('ring-2', 'ring-primary/10', 'rounded-lg');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
481
stitch_kintex_ai_system_architect/scr_a5/code.html
Normal file
481
stitch_kintex_ai_system_architect/scr_a5/code.html
Normal file
@ -0,0 +1,481 @@
|
|||||||
|
<!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 AI 전시관리 - 감사 로그</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&family=JetBrains+Mono:wght@400;500&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>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.monospace { font-family: 'JetBrains Mono', monospace; }
|
||||||
|
|
||||||
|
/* Custom scrollbar for dense data grid */
|
||||||
|
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb { background: #c1c7d3; border-radius: 10px; }
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #727781; }
|
||||||
|
|
||||||
|
/* Forensic Table Zebra Stripes */
|
||||||
|
.audit-table tr:nth-child(even) { background-color: #f2f3ff; }
|
||||||
|
.audit-table tr:hover { background-color: #eaedff; }
|
||||||
|
</style>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"primary": "#003765",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"outline": "#727781",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"error": "#ba1a1a"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"body-base": ["Inter"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface font-body-base text-on-surface selection:bg-primary-fixed">
|
||||||
|
<!-- SideNavBar (Authority: JSON) -->
|
||||||
|
<aside class="fixed left-0 top-0 bottom-0 flex flex-col z-40 bg-primary dark:bg-surface-container-highest w-64 shadow-lg">
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-surface-container-lowest flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-primary">analytics</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="text-title-sm font-bold text-on-primary dark:text-primary-fixed leading-tight">KINTEX AI</h1>
|
||||||
|
<p class="text-label-xs text-on-primary/70">전시관리 시스템</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 px-2 space-y-1 overflow-y-auto custom-scrollbar">
|
||||||
|
<!-- Dashboard -->
|
||||||
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
대시보드
|
||||||
|
</a>
|
||||||
|
<!-- Exhibition -->
|
||||||
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">event</span>
|
||||||
|
전시 관리
|
||||||
|
</a>
|
||||||
|
<!-- Users -->
|
||||||
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">group</span>
|
||||||
|
사용자 관리
|
||||||
|
</a>
|
||||||
|
<!-- Devices -->
|
||||||
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">router</span>
|
||||||
|
기기 모니터링
|
||||||
|
</a>
|
||||||
|
<!-- Analytics -->
|
||||||
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">analytics</span>
|
||||||
|
통계 분석
|
||||||
|
</a>
|
||||||
|
<!-- Audit Log (ACTIVE STATE) -->
|
||||||
|
<a class="bg-primary-container text-on-primary-container rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 text-label-md font-label-md active:scale-95 transition-transform duration-150" href="#">
|
||||||
|
<span class="material-symbols-outlined">history</span>
|
||||||
|
감사 로그
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="mt-auto border-t border-on-primary/10 p-2">
|
||||||
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
고객지원
|
||||||
|
</a>
|
||||||
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined">logout</span>
|
||||||
|
로그아웃
|
||||||
|
</a>
|
||||||
|
<div class="mt-4 px-4 py-3 flex items-center gap-3 bg-on-primary/5 rounded-lg">
|
||||||
|
<img alt="KINTEX Admin" class="w-8 h-8 rounded-full border border-on-primary/20" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBaRvnlKujdmGFwc7DU5xfkb_g6HJ0lFQMa2Gtwc8BJYeSVxSMrioBrJIrpQw-b5mBKrZ9w3WNc43TwfG16XNNMCqx6T3yApwLHjhDBsSG0hmbByWajOIr4HIoAc_w7b1PHOzaCh7lc5VtCyCZy1BiDESwPfXMawCJNn-3F2qoBPW9TJo2tqEdpHx7i7t5ojfvEYT5hosyAPEswYN9VwP8eWAmfoRpmB3f0vUHb2AvaCsfoT0ij5ffis62wtvvDsWvL5AyqYicKdSo"/>
|
||||||
|
<div class="truncate">
|
||||||
|
<p class="text-label-md font-bold text-on-primary">Admin User</p>
|
||||||
|
<p class="text-label-xs text-on-primary/50">System Root</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<main class="ml-64 min-h-screen">
|
||||||
|
<!-- TopAppBar (Authority: JSON) -->
|
||||||
|
<header class="fixed top-0 right-0 left-64 h-16 flex justify-between items-center px-6 z-30 bg-surface-bright dark:bg-surface-container-low border-b border-outline-variant dark:border-outline">
|
||||||
|
<div class="flex-1 max-w-xl">
|
||||||
|
<div class="relative group">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant group-focus-within:text-primary transition-colors">search</span>
|
||||||
|
<input class="w-full bg-surface-container-low border-outline-variant rounded-full pl-10 pr-4 py-2 text-body-base focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" placeholder="로그 기록 검색..." type="text"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 ml-6">
|
||||||
|
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg text-label-md font-semibold flex items-center gap-2 hover:bg-primary-container hover:text-on-primary-container transition-all">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">download</span>
|
||||||
|
CSV 내보내기
|
||||||
|
</button>
|
||||||
|
<div class="h-6 w-px bg-outline-variant mx-2"></div>
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container rounded-full transition-colors relative">
|
||||||
|
<span class="material-symbols-outlined">notifications</span>
|
||||||
|
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container rounded-full transition-colors">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container rounded-full transition-colors">
|
||||||
|
<span class="material-symbols-outlined">account_circle</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Page Canvas -->
|
||||||
|
<div class="pt-24 pb-12 px-8 max-w-[1440px] mx-auto">
|
||||||
|
<!-- Page Header -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<h2 class="text-headline-md font-bold text-on-surface">감사 로그 (Audit Log)</h2>
|
||||||
|
<p class="text-body-sm text-on-surface-variant mt-1">시스템 내 모든 사용자 활동과 데이터 변경 이력을 실시간으로 추적합니다. (포렌식 무결성 유지됨)</p>
|
||||||
|
</div>
|
||||||
|
<!-- Filter Bar -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-5 mb-8 shadow-sm">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-5 gap-4">
|
||||||
|
<div class="space-y-1.5">
|
||||||
|
<label class="text-label-xs text-on-surface-variant font-bold ml-1">사용자</label>
|
||||||
|
<div class="relative">
|
||||||
|
<select class="w-full bg-surface-container-low border-outline-variant rounded-lg py-2 pl-3 pr-10 text-body-base appearance-none focus:ring-primary focus:border-primary">
|
||||||
|
<option>전체 사용자</option>
|
||||||
|
<option>최매니저</option>
|
||||||
|
<option>김운영</option>
|
||||||
|
<option>박시스템</option>
|
||||||
|
</select>
|
||||||
|
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-on-surface-variant">expand_more</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1.5">
|
||||||
|
<label class="text-label-xs text-on-surface-variant font-bold ml-1">액션 유형</label>
|
||||||
|
<div class="relative">
|
||||||
|
<select class="w-full bg-surface-container-low border-outline-variant rounded-lg py-2 pl-3 pr-10 text-body-base appearance-none focus:ring-primary focus:border-primary">
|
||||||
|
<option>전체 액션</option>
|
||||||
|
<option>로그인/아웃</option>
|
||||||
|
<option>데이터 변경</option>
|
||||||
|
<option>권한 수정</option>
|
||||||
|
<option>시스템 제어</option>
|
||||||
|
</select>
|
||||||
|
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-on-surface-variant">expand_more</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1.5">
|
||||||
|
<label class="text-label-xs text-on-surface-variant font-bold ml-1">기간 설정</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input class="w-full bg-surface-container-low border-outline-variant rounded-lg py-2 px-3 text-body-base focus:ring-primary focus:border-primary" type="date"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1.5">
|
||||||
|
<label class="text-label-xs text-on-surface-variant font-bold ml-1">테넌트</label>
|
||||||
|
<div class="relative">
|
||||||
|
<select class="w-full bg-surface-container-low border-outline-variant rounded-lg py-2 pl-3 pr-10 text-body-base appearance-none focus:ring-primary focus:border-primary">
|
||||||
|
<option>전체 테넌트</option>
|
||||||
|
<option>제1전시장</option>
|
||||||
|
<option>제2전시장</option>
|
||||||
|
<option>본사 관리실</option>
|
||||||
|
</select>
|
||||||
|
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-on-surface-variant">expand_more</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-end">
|
||||||
|
<button class="w-full bg-primary text-on-primary py-2.5 rounded-lg text-label-md font-bold hover:brightness-110 active:scale-95 transition-all shadow-md">
|
||||||
|
필터 적용
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Audit Table Content -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm">
|
||||||
|
<div class="overflow-x-auto custom-scrollbar max-h-[600px]">
|
||||||
|
<table class="audit-table w-full text-left border-collapse min-w-[1000px]">
|
||||||
|
<thead class="sticky top-0 bg-surface-container-high z-10">
|
||||||
|
<tr class="border-b border-outline-variant">
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant uppercase tracking-wider">시각 (Timestamp)</th>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant uppercase tracking-wider">사용자 (User)</th>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant uppercase tracking-wider">액션 (Action)</th>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant uppercase tracking-wider">대상 (Target)</th>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant uppercase tracking-wider">IP 주소 (IP Address)</th>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant uppercase tracking-wider">결과 (Result)</th>
|
||||||
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant text-right">상세</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-outline-variant">
|
||||||
|
<!-- Row 1 -->
|
||||||
|
<tr class="transition-colors">
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap monospace text-body-sm">2026-08-01 14:22:15</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-primary-fixed text-on-primary-fixed text-[10px] flex items-center justify-center font-bold">최</div>
|
||||||
|
<span class="font-medium text-on-surface">최매니저</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-secondary-fixed text-on-secondary-fixed text-label-xs">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">gavel</span>
|
||||||
|
낙찰(Award)
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm font-medium">옥션 #A-102</td>
|
||||||
|
<td class="px-6 py-4 monospace text-body-sm text-on-surface-variant">192.168.0.45</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded bg-tertiary-fixed text-on-tertiary-fixed text-label-xs font-bold uppercase tracking-tighter">
|
||||||
|
성공
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-right">
|
||||||
|
<button class="text-primary hover:underline text-label-md font-bold">Details</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 2 -->
|
||||||
|
<tr class="transition-colors">
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap monospace text-body-sm">2026-08-01 14:20:03</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-tertiary-fixed text-on-tertiary-fixed text-[10px] flex items-center justify-center font-bold">김</div>
|
||||||
|
<span class="font-medium text-on-surface">김운영</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-primary-fixed text-on-primary-fixed text-label-xs">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">settings_input_component</span>
|
||||||
|
시스템 설정 변경
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm font-medium">공조 시스템 제어</td>
|
||||||
|
<td class="px-6 py-4 monospace text-body-sm text-on-surface-variant">10.0.45.122</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded bg-tertiary-fixed text-on-tertiary-fixed text-label-xs font-bold uppercase tracking-tighter">
|
||||||
|
성공
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-right">
|
||||||
|
<button class="text-primary hover:underline text-label-md font-bold">Details</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 3 -->
|
||||||
|
<tr class="transition-colors">
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap monospace text-body-sm text-error">2026-08-01 14:15:55</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-error-container text-on-error-container text-[10px] flex items-center justify-center font-bold">外</div>
|
||||||
|
<span class="font-medium text-on-surface italic">외부접속자</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-surface-variant text-on-surface-variant text-label-xs">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">login</span>
|
||||||
|
로그인 시도
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm font-medium">어드민 콘솔</td>
|
||||||
|
<td class="px-6 py-4 monospace text-body-sm text-on-surface-variant">211.23.4.89</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded bg-error-container text-on-error-container text-label-xs font-bold uppercase tracking-tighter">
|
||||||
|
실패
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-right">
|
||||||
|
<button class="text-primary hover:underline text-label-md font-bold">Details</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Dummy Data Rows for Density -->
|
||||||
|
<tr class="transition-colors">
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap monospace text-body-sm">2026-08-01 14:10:22</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-primary-fixed text-on-primary-fixed text-[10px] flex items-center justify-center font-bold">박</div>
|
||||||
|
<span class="font-medium text-on-surface">박시스템</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-primary-fixed text-on-primary-fixed text-label-xs">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||||
|
조회(Read)
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm font-medium">개인정보 로그</td>
|
||||||
|
<td class="px-6 py-4 monospace text-body-sm text-on-surface-variant">192.168.0.12</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded bg-tertiary-fixed text-on-tertiary-fixed text-label-xs font-bold uppercase tracking-tighter">
|
||||||
|
성공
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-right">
|
||||||
|
<button class="text-primary hover:underline text-label-md font-bold">Details</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="transition-colors">
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap monospace text-body-sm">2026-08-01 14:05:00</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-primary-fixed text-on-primary-fixed text-[10px] flex items-center justify-center font-bold">최</div>
|
||||||
|
<span class="font-medium text-on-surface">최매니저</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-primary-fixed text-on-primary-fixed text-label-xs">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">edit</span>
|
||||||
|
수정(Update)
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm font-medium">전시 일정표</td>
|
||||||
|
<td class="px-6 py-4 monospace text-body-sm text-on-surface-variant">192.168.0.45</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded bg-tertiary-fixed text-on-tertiary-fixed text-label-xs font-bold uppercase tracking-tighter">
|
||||||
|
성공
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-right">
|
||||||
|
<button class="text-primary hover:underline text-label-md font-bold">Details</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div class="px-6 py-4 bg-surface-container-low flex items-center justify-between border-t border-outline-variant">
|
||||||
|
<p class="text-label-xs text-on-surface-variant">표시 중: <span class="font-bold text-on-surface">1-5</span> / 총 1,482개 항목</p>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="p-1.5 rounded-lg hover:bg-surface-container-high text-on-surface-variant disabled:opacity-30 disabled:cursor-not-allowed" disabled="">
|
||||||
|
<span class="material-symbols-outlined">first_page</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-1.5 rounded-lg hover:bg-surface-container-high text-on-surface-variant disabled:opacity-30 disabled:cursor-not-allowed" disabled="">
|
||||||
|
<span class="material-symbols-outlined">chevron_left</span>
|
||||||
|
</button>
|
||||||
|
<div class="flex items-center gap-1 px-2">
|
||||||
|
<button class="w-8 h-8 rounded-lg bg-primary text-on-primary text-label-md font-bold">1</button>
|
||||||
|
<button class="w-8 h-8 rounded-lg hover:bg-surface-container-high text-on-surface-variant text-label-md">2</button>
|
||||||
|
<button class="w-8 h-8 rounded-lg hover:bg-surface-container-high text-on-surface-variant text-label-md">3</button>
|
||||||
|
<span class="px-1 text-on-surface-variant">...</span>
|
||||||
|
<button class="w-8 h-8 rounded-lg hover:bg-surface-container-high text-on-surface-variant text-label-md">297</button>
|
||||||
|
</div>
|
||||||
|
<button class="p-1.5 rounded-lg hover:bg-surface-container-high text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-1.5 rounded-lg hover:bg-surface-container-high text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined">last_page</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-label-xs text-on-surface-variant">행 표시:</span>
|
||||||
|
<select class="bg-surface-container-lowest border-outline-variant rounded-md py-1 px-2 text-label-xs focus:ring-primary focus:border-primary">
|
||||||
|
<option>10개</option>
|
||||||
|
<option>20개</option>
|
||||||
|
<option selected="">50개</option>
|
||||||
|
<option>100개</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Stats/Summary Summary Cards -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mt-8">
|
||||||
|
<div class="bg-surface-container-lowest border-l-4 border-primary p-4 rounded-lg shadow-sm">
|
||||||
|
<p class="text-label-xs text-on-surface-variant font-bold">오늘의 총 활동</p>
|
||||||
|
<div class="flex items-end justify-between mt-1">
|
||||||
|
<h4 class="text-headline-md font-bold text-on-surface">2,482</h4>
|
||||||
|
<span class="text-tertiary text-label-xs font-bold">+12% vs yesterday</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border-l-4 border-error p-4 rounded-lg shadow-sm">
|
||||||
|
<p class="text-label-xs text-on-surface-variant font-bold">비정상 접근 시도</p>
|
||||||
|
<div class="flex items-end justify-between mt-1">
|
||||||
|
<h4 class="text-headline-md font-bold text-error">14</h4>
|
||||||
|
<span class="text-error text-label-xs font-bold">Critical Alert</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border-l-4 border-secondary p-4 rounded-lg shadow-sm">
|
||||||
|
<p class="text-label-xs text-on-surface-variant font-bold">데이터 수정 건수</p>
|
||||||
|
<div class="flex items-end justify-between mt-1">
|
||||||
|
<h4 class="text-headline-md font-bold text-on-surface">156</h4>
|
||||||
|
<span class="text-on-surface-variant text-label-xs font-medium">Standard Volume</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border-l-4 border-tertiary p-4 rounded-lg shadow-sm">
|
||||||
|
<p class="text-label-xs text-on-surface-variant font-bold">평균 응답 속도</p>
|
||||||
|
<div class="flex items-end justify-between mt-1">
|
||||||
|
<h4 class="text-headline-md font-bold text-on-surface">42ms</h4>
|
||||||
|
<span class="text-tertiary text-label-xs font-bold">Optimal</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
// Simple micro-interaction for rows
|
||||||
|
document.querySelectorAll('.audit-table tr').forEach(row => {
|
||||||
|
row.addEventListener('click', (e) => {
|
||||||
|
if(e.target.tagName !== 'BUTTON') {
|
||||||
|
// Logic for expansion or detail view could go here
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
443
stitch_kintex_ai_system_architect/scr_a6/code.html
Normal file
443
stitch_kintex_ai_system_architect/scr_a6/code.html
Normal file
@ -0,0 +1,443 @@
|
|||||||
|
<!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 AI 전시관리 - 시스템 설정</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;800&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": {
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"on-tertiary-container": "#8ef7c3",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"surface-variant": "#dbe2f9",
|
||||||
|
"on-surface-variant": "#414751",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"inverse-on-surface": "#edf0ff",
|
||||||
|
"surface": "#f9f9ff",
|
||||||
|
"surface-dim": "#d2daf0",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"tertiary-container": "#00734e",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"surface-tint": "#0060a9",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"surface-container-highest": "#dbe2f9",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"inverse-surface": "#293041",
|
||||||
|
"primary-container": "#0066b3",
|
||||||
|
"on-primary-container": "#d2e3ff",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"surface-container-high": "#e0e8ff",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"primary": "#004e8b",
|
||||||
|
"background": "#f9f9ff",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"tertiary": "#00583b",
|
||||||
|
"surface-container": "#e9edff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"outline": "#717782",
|
||||||
|
"on-background": "#141b2c"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"gutter": "16px",
|
||||||
|
"base": "4px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"stack-sm": "8px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"headline-md": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.form-input-focus:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #0066b3;
|
||||||
|
box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.1);
|
||||||
|
}
|
||||||
|
.switch-input:checked + .switch-slider {
|
||||||
|
background-color: #0066b3;
|
||||||
|
}
|
||||||
|
.switch-input:checked + .switch-slider:before {
|
||||||
|
transform: translateX(1.25rem);
|
||||||
|
}
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-surface font-body-base overflow-hidden">
|
||||||
|
<!-- Sidebar Navigation -->
|
||||||
|
<aside class="fixed left-0 top-0 h-full w-64 bg-surface border-r border-outline-variant flex flex-col py-stack-lg z-50">
|
||||||
|
<div class="px-6 mb-10">
|
||||||
|
<img alt="KINTEX AI System Logo" class="h-8 w-auto object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDD5aGyo0LgtHc0bBQT2HV96NhrJKignZ66GoODx90BlGkjgcgzPNEAxwMcJmp9Jg4906Tmu3XDPWG7GJyRL7jAHzSGdSEs9sUsmb_P2ELY-MNEjaFXDCC0CGNoiL6Uk2lwU8rk2P2pbritLEa0CjF6QFsLNFcsQ6DN8VZSCVU5ePGHdnKuQMI8N2UZkCAgQYOkKLbzgWMD_OB5tPopOfKnYmhwMrVboYG8_EGRQCvMe1YcXoTResTl3AJQrDxY6V8m-ye0Cby_KR4"/>
|
||||||
|
<div class="mt-4">
|
||||||
|
<h1 class="font-headline-md text-headline-md font-bold text-primary">KINTEX AI</h1>
|
||||||
|
<p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">전시관리</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 px-3 space-y-1">
|
||||||
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">dashboard</span>
|
||||||
|
<span class="font-body-base">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">calendar_today</span>
|
||||||
|
<span class="font-body-base">Exhibition Schedule</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">domain</span>
|
||||||
|
<span class="font-body-base">Hall Operations</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center px-4 py-3 text-primary font-bold border-r-4 border-primary bg-surface-container-high transition-colors group" href="#">
|
||||||
|
<span class="material-symbols-outlined mr-3">settings</span>
|
||||||
|
<span class="font-body-base">System Settings</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="px-6 mt-auto">
|
||||||
|
<div class="p-4 bg-surface-container-low rounded-xl border border-outline-variant">
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<span class="material-symbols-outlined text-secondary mr-2" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
<span class="font-label-md text-secondary">AI Status</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-on-surface-variant">System Optimal</div>
|
||||||
|
<div class="w-full bg-outline-variant h-1 mt-2 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-secondary h-full w-[88%]"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Top Navigation Bar -->
|
||||||
|
<header class="fixed top-0 left-64 right-0 h-16 bg-surface border-b border-outline-variant flex justify-between items-center px-container-padding z-40">
|
||||||
|
<div class="flex items-center space-x-6">
|
||||||
|
<h2 class="font-title-sm text-title-sm text-on-surface font-extrabold">KINTEX AI 전시관리</h2>
|
||||||
|
<div class="relative">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">search</span>
|
||||||
|
<input class="pl-10 pr-4 py-1.5 bg-surface-container-low border border-outline-variant rounded-full text-body-sm w-64 focus:ring-2 focus:ring-primary-container outline-none transition-all" placeholder="설정 검색..." type="text"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high rounded-full transition-colors relative">
|
||||||
|
<span class="material-symbols-outlined">notifications</span>
|
||||||
|
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full border-2 border-surface"></span>
|
||||||
|
</button>
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high rounded-full transition-colors">
|
||||||
|
<span class="material-symbols-outlined">help_outline</span>
|
||||||
|
</button>
|
||||||
|
<div class="h-8 w-[1px] bg-outline-variant mx-2"></div>
|
||||||
|
<div class="flex items-center space-x-3 pl-2">
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="font-label-md text-on-surface leading-tight">Admin User</p>
|
||||||
|
<p class="font-label-xs text-on-surface-variant">System Manager</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-10 h-10 rounded-full bg-primary-fixed flex items-center justify-center border border-primary-container">
|
||||||
|
<span class="material-symbols-outlined text-primary">person</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Content Canvas -->
|
||||||
|
<main class="ml-64 mt-16 p-container-padding h-[calc(100vh-4rem)] overflow-y-auto">
|
||||||
|
<div class="max-w-6xl mx-auto">
|
||||||
|
<div class="mb-stack-lg">
|
||||||
|
<h3 class="font-display-lg text-display-lg text-on-surface">System Settings</h3>
|
||||||
|
<p class="text-on-surface-variant font-body-base">전시 지원 시스템의 글로벌 정책 및 AI 엔진 파라미터를 관리합니다.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Bento Grid Settings Layout -->
|
||||||
|
<div class="grid grid-cols-12 gap-gutter">
|
||||||
|
<!-- Deadline Policy Card -->
|
||||||
|
<div class="col-span-12 lg:col-span-7 bg-white rounded-xl border border-outline-variant overflow-hidden flex flex-col group">
|
||||||
|
<div class="h-1 bg-primary w-full"></div>
|
||||||
|
<div class="p-stack-lg flex-1">
|
||||||
|
<div class="flex justify-between items-start mb-6">
|
||||||
|
<div>
|
||||||
|
<h4 class="font-title-sm text-title-sm text-on-surface">마감 정책 (Deadline Policy)</h4>
|
||||||
|
<p class="text-label-md text-on-surface-variant">전시회 주요 마일스톤 자동 설정</p>
|
||||||
|
</div>
|
||||||
|
<span class="material-symbols-outlined text-outline">event_available</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-md text-on-surface-variant">Utility 신청 마감 (Days)</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input class="w-full px-4 py-2 border border-outline-variant rounded-lg font-body-base form-input-focus transition-all pr-12" type="number" value="25"/>
|
||||||
|
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-label-md text-outline font-bold">D-</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-md text-on-surface-variant">제출 서류 마감 (Days)</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input class="w-full px-4 py-2 border border-outline-variant rounded-lg font-body-base form-input-focus transition-all pr-12" type="number" value="7"/>
|
||||||
|
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-label-md text-outline font-bold">D-</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-md text-on-surface-variant">부스 배치 확정 (Days)</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input class="w-full px-4 py-2 border border-outline-variant rounded-lg font-body-base form-input-focus transition-all pr-12" type="number" value="45"/>
|
||||||
|
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-label-md text-outline font-bold">D-</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-md text-on-surface-variant">추가 전력 승인 (Days)</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input class="w-full px-4 py-2 border border-outline-variant rounded-lg font-body-base form-input-focus transition-all pr-12" type="number" value="14"/>
|
||||||
|
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-label-md text-outline font-bold">D-</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-low px-stack-lg py-4 flex justify-end">
|
||||||
|
<button class="px-6 py-2 bg-primary text-white font-label-md rounded-lg hover:opacity-90 transition-all flex items-center">
|
||||||
|
<span class="material-symbols-outlined text-sm mr-2">save</span>
|
||||||
|
저장
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- AI Platform Gate Card -->
|
||||||
|
<div class="col-span-12 lg:col-span-5 bg-white rounded-xl border border-secondary-container border-opacity-30 overflow-hidden flex flex-col relative">
|
||||||
|
<div class="h-1 bg-secondary w-full"></div>
|
||||||
|
<div class="p-stack-lg flex-1">
|
||||||
|
<div class="flex justify-between items-start mb-6">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<h4 class="font-title-sm text-title-sm text-on-surface">AI 플랫폼 게이트</h4>
|
||||||
|
<span class="material-symbols-outlined text-secondary text-sm" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-label-md text-on-surface-variant">모델 라우팅 및 처리 엔진 제어</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-center justify-between p-3 border border-outline-variant rounded-lg bg-surface-container-lowest">
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-on-surface">Model Router Status</p>
|
||||||
|
<p class="text-xs text-on-surface-variant">Active Load Balancing</p>
|
||||||
|
</div>
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input checked="" class="sr-only peer switch-input" type="checkbox"/>
|
||||||
|
<div class="w-11 h-6 bg-outline-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-3 border border-outline-variant rounded-lg bg-surface-container-lowest">
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-on-surface">Spatial Layout Engine</p>
|
||||||
|
<p class="text-xs text-on-surface-variant">Auto Booth Placement</p>
|
||||||
|
</div>
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input checked="" class="sr-only peer switch-input" type="checkbox"/>
|
||||||
|
<div class="w-11 h-6 bg-outline-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-3 border border-outline-variant rounded-lg bg-surface-container-lowest">
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-on-surface">Risk Analysis Engine</p>
|
||||||
|
<p class="text-xs text-on-surface-variant">Safety Regulation Check</p>
|
||||||
|
</div>
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input class="sr-only peer switch-input" type="checkbox"/>
|
||||||
|
<div class="w-11 h-6 bg-outline-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-low px-stack-lg py-4 flex justify-end">
|
||||||
|
<button class="px-6 py-2 bg-secondary text-white font-label-md rounded-lg hover:opacity-90 transition-all flex items-center">
|
||||||
|
<span class="material-symbols-outlined text-sm mr-2">refresh</span>
|
||||||
|
갱신
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Notification Settings Card -->
|
||||||
|
<div class="col-span-12 lg:col-span-4 bg-white rounded-xl border border-outline-variant overflow-hidden flex flex-col">
|
||||||
|
<div class="h-1 bg-tertiary-container w-full"></div>
|
||||||
|
<div class="p-stack-lg flex-1">
|
||||||
|
<div class="flex justify-between items-start mb-6">
|
||||||
|
<div>
|
||||||
|
<h4 class="font-title-sm text-title-sm text-on-surface">알림 설정</h4>
|
||||||
|
<p class="text-label-md text-on-surface-variant">전시 관리자 채널별 알림 제어</p>
|
||||||
|
</div>
|
||||||
|
<span class="material-symbols-outlined text-tertiary">notifications_active</span>
|
||||||
|
</div>
|
||||||
|
<ul class="space-y-4">
|
||||||
|
<li class="flex items-center justify-between group">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-tertiary transition-colors">mail</span>
|
||||||
|
<span class="font-body-base">이메일 (Email)</span>
|
||||||
|
</div>
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input checked="" class="sr-only peer" type="checkbox"/>
|
||||||
|
<div class="w-10 h-5 bg-outline-variant rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-tertiary-container"></div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center justify-between group">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-tertiary transition-colors">sync_alt</span>
|
||||||
|
<span class="font-body-base">웹소켓 (WebSocket)</span>
|
||||||
|
</div>
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input checked="" class="sr-only peer" type="checkbox"/>
|
||||||
|
<div class="w-10 h-5 bg-outline-variant rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-tertiary-container"></div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center justify-between group">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-tertiary transition-colors">send_to_mobile</span>
|
||||||
|
<span class="font-body-base">푸시 알림 (Push)</span>
|
||||||
|
</div>
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input class="sr-only peer" type="checkbox"/>
|
||||||
|
<div class="w-10 h-5 bg-outline-variant rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-tertiary-container"></div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-low px-stack-lg py-4 flex justify-end">
|
||||||
|
<button class="px-6 py-2 bg-tertiary-container text-white font-label-md rounded-lg hover:opacity-90 transition-all">저장</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Security & Account Card -->
|
||||||
|
<div class="col-span-12 lg:col-span-8 bg-white rounded-xl border border-outline-variant overflow-hidden flex flex-col">
|
||||||
|
<div class="h-1 bg-error w-full"></div>
|
||||||
|
<div class="p-stack-lg flex-1">
|
||||||
|
<div class="flex justify-between items-start mb-6">
|
||||||
|
<div>
|
||||||
|
<h4 class="font-title-sm text-title-sm text-on-surface">보안 및 계정 (Security & Account)</h4>
|
||||||
|
<p class="text-label-md text-on-surface-variant">시스템 접근 권한 및 보안 임계값 설정</p>
|
||||||
|
</div>
|
||||||
|
<span class="material-symbols-outlined text-error">lock_reset</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-8">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-md text-on-surface-variant">로그인 실패 잠금 임계치</label>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<input class="flex-1 accent-error" max="10" min="3" type="range" value="5"/>
|
||||||
|
<span class="w-8 text-center font-bold text-on-surface">5</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-[10px] text-on-surface-variant">회 연속 실패 시 계정이 30분간 잠금 처리됩니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-md text-on-surface-variant">세션 타임아웃 (Minutes)</label>
|
||||||
|
<input class="w-full px-4 py-2 border border-outline-variant rounded-lg font-body-base form-input-focus transition-all" type="number" value="120"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4 border-l border-outline-variant pl-8">
|
||||||
|
<div class="p-3 bg-error-container bg-opacity-30 rounded-lg border border-error border-opacity-10">
|
||||||
|
<p class="font-label-md text-error flex items-center">
|
||||||
|
<span class="material-symbols-outlined text-sm mr-1">warning</span>
|
||||||
|
중요 보안 경고
|
||||||
|
</p>
|
||||||
|
<p class="text-[11px] text-on-surface-variant mt-1 leading-relaxed">
|
||||||
|
비활성 세션의 자동 종료 시간이 4시간을 초과하면 보안 취약성이 증가할 수 있습니다. 120분 이내를 권장합니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<input class="rounded border-outline-variant text-error focus:ring-error" id="mfa" type="checkbox"/>
|
||||||
|
<label class="font-body-base text-on-surface" for="mfa">관리자 2단계 인증(MFA) 강제</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-low px-stack-lg py-4 flex justify-end">
|
||||||
|
<button class="px-6 py-2 border border-error text-error hover:bg-error hover:text-white font-label-md rounded-lg transition-all">보안 정책 업데이트</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Bottom Floating Action State (Optional Contextual Info) -->
|
||||||
|
<div class="mt-stack-lg p-stack-lg border border-outline-variant rounded-xl glass-panel flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="w-12 h-12 bg-surface-container-high rounded-full flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-primary">history</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-on-surface">마지막 변경 사항</p>
|
||||||
|
<p class="text-xs text-on-surface-variant">2023-11-20 14:32:01 (Admin: 김관리)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<button class="px-4 py-2 text-primary font-label-md hover:bg-primary-fixed rounded-lg transition-colors">설정 로그 보기</button>
|
||||||
|
<button class="px-4 py-2 bg-primary text-white font-label-md rounded-lg shadow-sm">전체 초기화</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Simple Feedback Toast (Hidden by default) -->
|
||||||
|
<div class="fixed bottom-8 right-8 bg-inverse-surface text-inverse-on-surface px-6 py-3 rounded-lg shadow-xl translate-y-20 opacity-0 transition-all flex items-center gap-3" id="toast">
|
||||||
|
<span class="material-symbols-outlined text-tertiary-fixed">check_circle</span>
|
||||||
|
<span class="font-label-md">설정이 성공적으로 저장되었습니다.</span>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
// Micro-interactions for buttons
|
||||||
|
document.querySelectorAll('button').forEach(btn => {
|
||||||
|
btn.addEventListener('click', function() {
|
||||||
|
const toast = document.getElementById('toast');
|
||||||
|
if (this.textContent.includes('저장') || this.textContent.includes('업데이트')) {
|
||||||
|
toast.classList.remove('translate-y-20', 'opacity-0');
|
||||||
|
setTimeout(() => {
|
||||||
|
toast.classList.add('translate-y-20', 'opacity-0');
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Range input dynamic value display
|
||||||
|
const range = document.querySelector('input[type="range"]');
|
||||||
|
const rangeVal = range.nextElementSibling;
|
||||||
|
range.addEventListener('input', (e) => {
|
||||||
|
rangeVal.textContent = e.target.value;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
415
stitch_kintex_ai_system_architect/scr_a8/code.html
Normal file
415
stitch_kintex_ai_system_architect/scr_a8/code.html
Normal file
@ -0,0 +1,415 @@
|
|||||||
|
<!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 AI 전시관리 - 규정 룰셋 버전 관리</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@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"/>
|
||||||
|
<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-container-lowest": "#ffffff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-primary-container": "#d2e3ff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"surface-container-highest": "#dbe2f9",
|
||||||
|
"surface-dim": "#d2daf0",
|
||||||
|
"primary": "#004e8b",
|
||||||
|
"surface-variant": "#dbe2f9",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"tertiary": "#00583b",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"outline": "#717782",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"inverse-on-surface": "#edf0ff",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"surface": "#f9f9ff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"background": "#f9f9ff",
|
||||||
|
"surface-tint": "#0060a9",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"primary-container": "#0066b3",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"surface-container-high": "#e0e8ff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"on-tertiary-container": "#8ef7c3",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"tertiary-container": "#00734e",
|
||||||
|
"surface-container": "#e9edff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"on-surface-variant": "#414751",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"inverse-surface": "#293041"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"base": "4px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"container-padding": "24px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"label-xs": ["Geist"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #f9f9ff;
|
||||||
|
color: #141b2c;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.ai-sparkle {
|
||||||
|
background: linear-gradient(135deg, #6d4aff 0%, #a2c9ff 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid #e4e7ec;
|
||||||
|
}
|
||||||
|
.diff-highlight {
|
||||||
|
background-color: rgba(142, 247, 196, 0.2);
|
||||||
|
border: 1px dashed #00734e;
|
||||||
|
padding: 2px 4px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="flex min-h-screen">
|
||||||
|
<!-- SideNavBar (JSON Derived) -->
|
||||||
|
<aside class="h-screen w-64 flex flex-col fixed left-0 top-0 border-r border-outline-variant bg-surface-container-lowest dark:bg-inverse-surface z-50">
|
||||||
|
<div class="flex flex-col h-full py-container-padding">
|
||||||
|
<div class="px-6 mb-8 flex items-center gap-3">
|
||||||
|
<img alt="KINTEX Admin Logo" class="w-10 h-10 object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC6V0s6sv3fICyRYDkuGa9U7wtttCQXigoxrZik7bHl2PFslxM-DJd8qSQY6gMx9k67jg7BGYJDDYzA_Rv-pj-rQWYydKc72hCmvBxl_FNEri0l9fe9v4wjw1eZNXbKJ49hY3sOTDiF004PcPCmDXgQmBt7glmbNcJMjxyPWeYtPp3RqbfjIqgKv0DkgRuOZpRXbgfPMQ6uukggW2BX_vmeStzPRmnO9w9wMX1LkMA3OErTiZ6ioaz_Khdz8kWV_vEcdKBq56nE3Hk"/>
|
||||||
|
<div>
|
||||||
|
<h1 class="font-headline-md text-headline-md font-bold text-primary">KINTEX AI</h1>
|
||||||
|
<p class="font-label-xs text-label-xs text-on-surface-variant opacity-70">Exhibition Management</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 px-3 space-y-1">
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="font-label-md text-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined">group</span>
|
||||||
|
<span class="font-label-md text-label-md">User Management</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container font-semibold rounded-lg scale-[0.99] transition-transform duration-150" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings_ethernet</span>
|
||||||
|
<span class="font-label-md text-label-md">Common Code Management</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined">grid_view</span>
|
||||||
|
<span class="font-label-md text-label-md">Exhibition Layout</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span class="font-label-md text-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="px-3 mt-auto pt-6 border-t border-outline-variant space-y-1">
|
||||||
|
<button class="w-full flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
<span class="font-label-md text-label-md">Help Center</span>
|
||||||
|
</button>
|
||||||
|
<button class="w-full flex items-center gap-3 px-4 py-3 text-error hover:bg-error-container transition-colors rounded-lg">
|
||||||
|
<span class="material-symbols-outlined">logout</span>
|
||||||
|
<span class="font-label-md text-label-md">Logout</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<main class="flex-1 ml-64 flex flex-col min-w-0">
|
||||||
|
<!-- TopNavBar (JSON Derived) -->
|
||||||
|
<header class="h-16 w-full sticky top-0 z-40 border-b border-outline-variant bg-surface flex items-center justify-between px-gutter">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<nav class="flex items-center text-on-surface-variant font-label-md text-label-md">
|
||||||
|
<span>시스템 설정</span>
|
||||||
|
<span class="material-symbols-outlined text-sm mx-1">chevron_right</span>
|
||||||
|
<span class="text-primary font-bold">규정 룰셋 버전 관리</span>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="relative group">
|
||||||
|
<input class="h-9 px-4 pr-10 rounded-full bg-surface-container-low border-none focus:ring-2 focus:ring-primary text-body-sm w-64 transition-all" placeholder="Search rules..." type="text"/>
|
||||||
|
<span class="material-symbols-outlined absolute right-3 top-2 text-on-surface-variant">search</span>
|
||||||
|
</div>
|
||||||
|
<button class="material-symbols-outlined p-2 hover:bg-surface-container-high rounded-full transition-colors">notifications</button>
|
||||||
|
<button class="material-symbols-outlined p-2 hover:bg-surface-container-high rounded-full transition-colors">help</button>
|
||||||
|
<div class="h-8 w-[1px] bg-outline-variant"></div>
|
||||||
|
<div class="flex items-center gap-3 pl-2">
|
||||||
|
<span class="font-label-md text-label-md font-semibold">Admin Profile</span>
|
||||||
|
<img class="w-8 h-8 rounded-full border border-outline-variant object-cover" data-alt="A professional headshot of a corporate administrator, middle-aged male with glasses, wearing a sleek modern navy suit. The image has a clean, high-key studio lighting with a soft neutral gray background, maintaining a professional and reliable B2B enterprise aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBOeVDzDtw9HgCHPbNvLCorzXespBE58iXkZbwD1nbJcQDBIJDs-wCqmcbD2QyeGdcVKZcx2mtPg7WcxBtEBcut0CcgYKNqw5P6DnzcrCFif5Fa5O6PEyBvQnBwNFJ92cL2cNDt7ykDIgF-OlXHDI5Y5Nndl-MjQFf0d9alaEw5_7yKZZ50zDHRaw8y0vOy4QsvY4KXcyPrWjzGRBLdojN7uanbtfHzqBhBNgu_cp-3t9ORKhBlDC5fRH9UkZaef9EE-KM5nQe1tu0"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Page Content -->
|
||||||
|
<div class="flex-1 flex overflow-hidden p-6 gap-6">
|
||||||
|
<!-- Left Panel: Version History -->
|
||||||
|
<section class="w-80 flex flex-col gap-4">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h2 class="font-title-sm text-title-sm">버전 히스토리</h2>
|
||||||
|
<button class="bg-primary hover:bg-primary-container text-white px-3 py-1.5 rounded-lg font-label-md text-label-md flex items-center gap-2 transition-all active:scale-95 shadow-sm">
|
||||||
|
<span class="material-symbols-outlined text-sm">add</span>
|
||||||
|
새 버전 초안 생성
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 overflow-y-auto space-y-2">
|
||||||
|
<!-- Version Item Active -->
|
||||||
|
<div class="p-4 bg-surface-container-high border-l-4 border-primary rounded-r-xl cursor-pointer hover:shadow-md transition-all">
|
||||||
|
<div class="flex justify-between items-start mb-1">
|
||||||
|
<span class="font-bold text-body-base">v1.2</span>
|
||||||
|
<span class="status-badge bg-tertiary-container text-on-tertiary-container">현재 발효</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-on-surface-variant font-label-xs">배포일: 2026-01-01</p>
|
||||||
|
<p class="text-on-surface-variant font-label-xs mt-2 italic">최신 전시 규정 통합본</p>
|
||||||
|
</div>
|
||||||
|
<!-- Version Item Expired -->
|
||||||
|
<div class="p-4 bg-white border border-outline-variant rounded-xl cursor-pointer hover:bg-surface-container-low transition-all">
|
||||||
|
<div class="flex justify-between items-start mb-1">
|
||||||
|
<span class="font-bold text-body-base text-on-surface-variant">v1.1</span>
|
||||||
|
<span class="status-badge bg-surface-container-highest text-on-surface-variant">만료</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-on-surface-variant font-label-xs">배포일: 2025-06-01</p>
|
||||||
|
</div>
|
||||||
|
<!-- Version Item Expired -->
|
||||||
|
<div class="p-4 bg-white border border-outline-variant rounded-xl cursor-pointer hover:bg-surface-container-low transition-all">
|
||||||
|
<div class="flex justify-between items-start mb-1">
|
||||||
|
<span class="font-bold text-body-base text-on-surface-variant">v1.0</span>
|
||||||
|
<span class="status-badge bg-surface-container-highest text-on-surface-variant">만료</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-on-surface-variant font-label-xs">배포일: 2025-01-01</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Right Panel: Rules Editor -->
|
||||||
|
<section class="flex-1 glass-panel rounded-2xl flex flex-col overflow-hidden shadow-sm">
|
||||||
|
<!-- Editor Header -->
|
||||||
|
<div class="px-container-padding py-stack-lg border-b border-outline-variant flex items-center justify-between bg-white/50">
|
||||||
|
<div>
|
||||||
|
<h2 class="font-title-sm text-title-sm flex items-center gap-2">
|
||||||
|
v1.2 상세 규칙 설정
|
||||||
|
<span class="material-symbols-outlined text-secondary text-lg" style="font-variation-settings: 'FILL' 1;">verified</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-on-surface-variant font-body-sm">총 12개의 규칙이 적용되어 있습니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="flex items-center gap-2 px-4 py-2 bg-secondary-container text-on-secondary-container rounded-lg font-label-md transition-all hover:brightness-110 active:scale-95 border border-secondary shadow-sm" id="diff-toggle">
|
||||||
|
<span class="material-symbols-outlined ai-sparkle" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
버전 비교 (Diff)
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Rules List -->
|
||||||
|
<div class="flex-1 overflow-y-auto p-gutter">
|
||||||
|
<table class="w-full text-left border-separate border-spacing-y-2">
|
||||||
|
<thead>
|
||||||
|
<tr class="text-on-surface-variant font-label-md uppercase tracking-wider">
|
||||||
|
<th class="px-4 py-2 font-semibold">규칙명</th>
|
||||||
|
<th class="px-4 py-2 font-semibold text-center">수치/설정값</th>
|
||||||
|
<th class="px-4 py-2 font-semibold">논리/요구사항</th>
|
||||||
|
<th class="px-4 py-2 font-semibold">위반 수준</th>
|
||||||
|
<th class="px-4 py-2 font-semibold text-right">관리</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<!-- Rule Row: Height -->
|
||||||
|
<tr class="rule-row bg-white border border-outline-variant rounded-lg transition-colors hover:bg-surface-container-low group">
|
||||||
|
<td class="px-4 py-4 font-semibold text-body-base">장치물 높이</td>
|
||||||
|
<td class="px-4 py-4">
|
||||||
|
<div class="flex items-center justify-center gap-2">
|
||||||
|
<input class="w-16 h-8 text-center border-outline-variant rounded focus:ring-primary text-body-sm transition-all diff-highlight-target" type="text" value="5m"/>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4 text-on-surface-variant font-body-sm">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="font-mono bg-surface-container text-primary px-1.5 py-0.5 rounded">≤</span>
|
||||||
|
<span>최대 높이 제한</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4">
|
||||||
|
<span class="status-badge bg-error-container text-on-error-container">차단</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4 text-right">
|
||||||
|
<button class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">settings</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Rule Row: Rigging -->
|
||||||
|
<tr class="rule-row bg-white border border-outline-variant rounded-lg transition-colors hover:bg-surface-container-low group">
|
||||||
|
<td class="px-4 py-4 font-semibold text-body-base">리깅(Rigging) 높이</td>
|
||||||
|
<td class="px-4 py-4 text-center text-body-sm font-medium">6.5–8.5m</td>
|
||||||
|
<td class="px-4 py-4 text-on-surface-variant font-body-sm">
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-sm text-secondary">info</span>
|
||||||
|
구조계산서 제출 (D-7)
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4">
|
||||||
|
<span class="status-badge bg-surface-container-highest text-on-surface">경고</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4 text-right">
|
||||||
|
<button class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">settings</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Rule Row: Double Floor -->
|
||||||
|
<tr class="rule-row bg-white border border-outline-variant rounded-lg transition-colors hover:bg-surface-container-low group">
|
||||||
|
<td class="px-4 py-4 font-semibold text-body-base">복층 부스</td>
|
||||||
|
<td class="px-4 py-4 text-center text-body-sm font-medium">≤ 1/2 면적</td>
|
||||||
|
<td class="px-4 py-4 text-on-surface-variant font-body-sm">전체 점유 면적 대비 기준</td>
|
||||||
|
<td class="px-4 py-4">
|
||||||
|
<span class="status-badge bg-error-container text-on-error-container">차단</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4 text-right">
|
||||||
|
<button class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">settings</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Rule Row: Fire Proof -->
|
||||||
|
<tr class="rule-row bg-white border border-outline-variant rounded-lg transition-colors hover:bg-surface-container-low group">
|
||||||
|
<td class="px-4 py-4 font-semibold text-body-base">방염 성능</td>
|
||||||
|
<td class="px-4 py-4 text-center text-body-sm font-medium">방염필증 필수</td>
|
||||||
|
<td class="px-4 py-4 text-on-surface-variant font-body-sm">모든 목재 및 가연성 자재</td>
|
||||||
|
<td class="px-4 py-4">
|
||||||
|
<span class="status-badge bg-error-container text-on-error-container">차단</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4 text-right">
|
||||||
|
<button class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">settings</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Rule Row: Noise -->
|
||||||
|
<tr class="rule-row bg-white border border-outline-variant rounded-lg transition-colors hover:bg-surface-container-low group">
|
||||||
|
<td class="px-4 py-4 font-semibold text-body-base">소음 규정</td>
|
||||||
|
<td class="px-4 py-4 text-center text-body-sm font-medium">70–75dB</td>
|
||||||
|
<td class="px-4 py-4 text-on-surface-variant font-body-sm">상시 모니터링 기준</td>
|
||||||
|
<td class="px-4 py-4">
|
||||||
|
<span class="status-badge bg-surface-container-highest text-on-surface">경고</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4 text-right">
|
||||||
|
<button class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">settings</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Rule Row: Distance -->
|
||||||
|
<tr class="rule-row bg-white border border-outline-variant rounded-lg transition-colors hover:bg-surface-container-low group">
|
||||||
|
<td class="px-4 py-4 font-semibold text-body-base">이격 거리</td>
|
||||||
|
<td class="px-4 py-4 text-center text-body-sm font-medium">벽체 30 / 천장 60</td>
|
||||||
|
<td class="px-4 py-4 text-on-surface-variant font-body-sm">단위: cm, 소방 통로 확보</td>
|
||||||
|
<td class="px-4 py-4">
|
||||||
|
<span class="status-badge bg-surface-container-highest text-on-surface">경고</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-4 text-right">
|
||||||
|
<button class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">settings</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<!-- Footer Actions -->
|
||||||
|
<div class="px-container-padding py-gutter bg-white border-t border-outline-variant flex justify-end gap-3">
|
||||||
|
<button class="px-6 py-2.5 rounded-lg font-label-md text-on-surface-variant hover:bg-surface-container transition-colors border border-outline-variant">
|
||||||
|
임시 저장
|
||||||
|
</button>
|
||||||
|
<button class="px-8 py-2.5 bg-primary text-white rounded-lg font-label-md hover:brightness-110 shadow-lg shadow-primary/20 transition-all active:scale-[0.98]">
|
||||||
|
저장 및 배포
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Micro-interaction Script -->
|
||||||
|
<script>
|
||||||
|
const diffBtn = document.getElementById('diff-toggle');
|
||||||
|
const targetInput = document.querySelector('.diff-highlight-target');
|
||||||
|
let isDiffActive = false;
|
||||||
|
|
||||||
|
diffBtn.addEventListener('click', () => {
|
||||||
|
isDiffActive = !isDiffActive;
|
||||||
|
|
||||||
|
if (isDiffActive) {
|
||||||
|
diffBtn.classList.add('ring-2', 'ring-secondary', 'ring-offset-2');
|
||||||
|
targetInput.classList.add('diff-highlight');
|
||||||
|
// Simulate "before" text appearing
|
||||||
|
const beforeTag = document.createElement('span');
|
||||||
|
beforeTag.id = 'diff-tag';
|
||||||
|
beforeTag.innerHTML = '<span class="text-error line-through text-[10px] block opacity-60">4m</span>';
|
||||||
|
targetInput.parentElement.prepend(beforeTag);
|
||||||
|
} else {
|
||||||
|
diffBtn.classList.remove('ring-2', 'ring-secondary', 'ring-offset-2');
|
||||||
|
targetInput.classList.remove('diff-highlight');
|
||||||
|
const tag = document.getElementById('diff-tag');
|
||||||
|
if (tag) tag.remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hover animation for sidebar items
|
||||||
|
document.querySelectorAll('aside nav a').forEach(item => {
|
||||||
|
item.addEventListener('mouseenter', () => {
|
||||||
|
if(!item.classList.contains('bg-secondary-container')) {
|
||||||
|
item.style.transform = 'translateX(4px)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
item.addEventListener('mouseleave', () => {
|
||||||
|
item.style.transform = 'translateX(0)';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
486
stitch_kintex_ai_system_architect/scr_a9/code.html
Normal file
486
stitch_kintex_ai_system_architect/scr_a9/code.html
Normal file
@ -0,0 +1,486 @@
|
|||||||
|
<!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 AI Exhibition Management - Super Admin</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@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"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.step-active::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: -1px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 2px;
|
||||||
|
background-color: #004e8b;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"primary": "#004e8b",
|
||||||
|
"surface-container": "#e9edff",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"outline": "#717782",
|
||||||
|
"tertiary-container": "#00734e",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"surface-tint": "#0060a9",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"surface": "#f9f9ff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"tertiary": "#00583b",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"background": "#f9f9ff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"surface-dim": "#d2daf0",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"inverse-on-surface": "#edf0ff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"surface-container-highest": "#dbe2f9",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-primary-container": "#d2e3ff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"surface-variant": "#dbe2f9",
|
||||||
|
"primary-container": "#0066b3",
|
||||||
|
"on-primary-fixed-variant": "#004881"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"container-padding": "24px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-lg": "24px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"display-lg": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-surface font-body-base overflow-hidden flex h-screen w-full">
|
||||||
|
<!-- SideNavBar Component -->
|
||||||
|
<aside class="fixed left-0 top-0 h-full w-64 z-50 bg-surface-container-low border-r border-outline-variant flex flex-col py-6 px-4">
|
||||||
|
<div class="mb-10 px-2 flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 bg-primary rounded flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-white text-[20px]" data-weight="fill">corporate_fare</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="font-title-sm text-title-sm font-bold text-primary leading-tight">KINTEX Admin</h1>
|
||||||
|
<p class="text-on-surface-variant font-label-md text-[10px] uppercase tracking-wider">Enterprise Management</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1 space-y-1">
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-container-high transition-transform scale-95 active:scale-90 font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||||
|
대시보드
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-container-high transition-transform scale-95 active:scale-90 font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
|
||||||
|
부스 관리
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-container-high transition-transform scale-95 active:scale-90 font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="calendar_month">calendar_month</span>
|
||||||
|
전시 일정
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-container-high transition-transform scale-95 active:scale-90 font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="security">security</span>
|
||||||
|
감사 로그
|
||||||
|
</a>
|
||||||
|
<a class="bg-primary-container text-on-primary-container font-bold rounded-lg flex items-center gap-3 px-3 py-2.5 transition-transform scale-95 active:scale-90 font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="corporate_fare">corporate_fare</span>
|
||||||
|
테넌트 설정
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-container-high transition-transform scale-95 active:scale-90 font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="settings_suggest">settings_suggest</span>
|
||||||
|
시스템 로그
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="mt-auto border-t border-outline-variant pt-4 space-y-1">
|
||||||
|
<button class="w-full mb-4 py-2.5 px-4 bg-primary text-white rounded font-label-md text-label-md flex items-center justify-center gap-2 hover:bg-opacity-90">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">download</span>
|
||||||
|
CSV 내보내기
|
||||||
|
</button>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-high font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||||
|
도움말
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-high font-label-md text-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
||||||
|
로그아웃
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Content Main Area -->
|
||||||
|
<main class="flex-1 ml-64 flex flex-col h-full bg-background overflow-hidden">
|
||||||
|
<!-- TopNavBar Component -->
|
||||||
|
<header class="fixed top-0 left-64 right-0 h-16 z-40 bg-surface-container-lowest border-b border-outline-variant px-gutter flex justify-between items-center">
|
||||||
|
<div class="flex items-center gap-6 w-1/2">
|
||||||
|
<div class="relative w-full max-w-md">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span>
|
||||||
|
<input class="w-full bg-surface-container border-none rounded-lg py-2 pl-10 pr-4 text-body-sm focus:ring-2 focus:ring-primary" placeholder="테넌트, 도메인, 또는 관리자 검색..." type="text"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button class="w-10 h-10 flex items-center justify-center rounded-full text-on-surface-variant hover:bg-surface-container-low transition-colors">
|
||||||
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||||
|
</button>
|
||||||
|
<button class="w-10 h-10 flex items-center justify-center rounded-full text-on-surface-variant hover:bg-surface-container-low transition-colors">
|
||||||
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||||
|
</button>
|
||||||
|
<div class="h-8 w-px bg-outline-variant mx-2"></div>
|
||||||
|
<div class="flex items-center gap-3 ml-2 group cursor-pointer">
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="font-label-md text-label-md text-on-surface">Super Admin</p>
|
||||||
|
<p class="text-on-surface-variant text-[11px]">System Manager</p>
|
||||||
|
</div>
|
||||||
|
<img class="w-9 h-9 rounded-full border border-outline-variant object-cover" data-alt="A professional headshot of a corporate administrator in a modern office setting. High-end business attire, neutral lighting, and a soft blurred background of a technology-focused workspace. The aesthetic is clean, professional, and reliable, aligned with the KINTEX AI brand's institutional authority." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAxg83FFQTmt-Kn8bMH-Ya29CBdQzyY18t0SjTuDuZvt176htTw8qzHVw3FaOBxIzfX9rxfky-x446J0Y_jhIuuSEKJMPFipbqxo6E1DIOepQLBaLjl07kP4dAIzeb93YlTtxs6iM1HBEcCZ7rjfchFBXt3tNxU-wa55MW-g0PZBTz_N81os5tAijK8v_S1g2s1wEKQyAYzowqYSbtXMzPqfVtKs393HktmuzDExKO_AtAfNtJXlgDXF5e-pFCXY3WCT8tHfxmtSP8"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Body Scrollable Area -->
|
||||||
|
<div class="mt-16 p-container-padding flex-1 overflow-y-auto space-y-stack-lg">
|
||||||
|
<div class="flex justify-between items-end">
|
||||||
|
<div>
|
||||||
|
<h2 class="font-headline-md text-headline-md text-on-surface">테넌트 관리 및 온보딩</h2>
|
||||||
|
<p class="text-on-surface-variant text-body-base">멀티 테넌트 인프라 환경의 리소스 할당 및 새로운 전시관 인스턴스를 관리합니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="px-4 py-2 bg-surface-container-high text-on-surface font-label-md text-label-md rounded border border-outline-variant hover:bg-surface-container-highest transition-colors">시스템 모니터링</button>
|
||||||
|
<button class="px-4 py-2 bg-primary text-white font-label-md text-label-md rounded flex items-center gap-2 hover:bg-opacity-90 transition-shadow">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">add</span>
|
||||||
|
신규 테넌트 등록
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Dashboard Layout (Two Columns) -->
|
||||||
|
<div class="grid grid-cols-10 gap-gutter items-start">
|
||||||
|
<!-- Left: Tenant List (70%) -->
|
||||||
|
<div class="col-span-7 bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden flex flex-col">
|
||||||
|
<div class="px-6 py-4 border-b border-outline-variant bg-white flex justify-between items-center">
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface">테넌트 목록</h3>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-label-xs text-on-surface-variant">정렬 기준:</span>
|
||||||
|
<select class="text-label-md bg-transparent border-none focus:ring-0 cursor-pointer text-primary">
|
||||||
|
<option>생성일순</option>
|
||||||
|
<option>활성 사용자순</option>
|
||||||
|
<option>행사수순</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full text-left border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr class="bg-surface-container-low text-on-surface-variant font-label-md text-[11px] uppercase tracking-wider">
|
||||||
|
<th class="px-6 py-3 border-b border-outline-variant">전시관 (Venue)</th>
|
||||||
|
<th class="px-6 py-3 border-b border-outline-variant">코드</th>
|
||||||
|
<th class="px-6 py-3 border-b border-outline-variant">도메인</th>
|
||||||
|
<th class="px-6 py-3 border-b border-outline-variant">상태</th>
|
||||||
|
<th class="px-6 py-3 border-b border-outline-variant text-right">행사수</th>
|
||||||
|
<th class="px-6 py-3 border-b border-outline-variant text-right">사용자수</th>
|
||||||
|
<th class="px-6 py-3 border-b border-outline-variant"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-outline-variant">
|
||||||
|
<!-- Row 1 -->
|
||||||
|
<tr class="hover:bg-surface-container-low/50 transition-colors group">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center text-primary font-bold text-[12px]">K</div>
|
||||||
|
<span class="font-medium text-on-surface">킨텍스</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 font-label-md text-on-surface-variant">KINTEX</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm text-on-surface-variant">kintex.wise.ai.kr</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-medium bg-tertiary-fixed-dim/20 text-tertiary border border-tertiary/20">
|
||||||
|
활성 (Active)
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-right font-label-md">24</td>
|
||||||
|
<td class="px-6 py-4 text-right font-label-md">1,280</td>
|
||||||
|
<td class="px-6 py-4 text-right">
|
||||||
|
<button class="p-1 rounded hover:bg-surface-container-high text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">more_vert</span>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 2 -->
|
||||||
|
<tr class="hover:bg-surface-container-low/50 transition-colors group">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded bg-secondary/10 flex items-center justify-center text-secondary font-bold text-[12px]">C</div>
|
||||||
|
<span class="font-medium text-on-surface">코엑스</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 font-label-md text-on-surface-variant">COEX</td>
|
||||||
|
<td class="px-6 py-4 text-body-sm text-on-surface-variant">coex.wise.ai.kr</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-medium bg-primary-fixed text-on-primary-fixed-variant border border-primary/20">
|
||||||
|
온보딩중 (Onboarding)
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-right font-label-md text-outline-variant">-</td>
|
||||||
|
<td class="px-6 py-4 text-right font-label-md text-outline-variant">-</td>
|
||||||
|
<td class="px-6 py-4 text-right">
|
||||||
|
<button class="p-1 rounded hover:bg-surface-container-high text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">more_vert</span>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- AI Drafted Placeholder -->
|
||||||
|
<tr class="bg-primary/5 border-l-4 border-primary">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded border border-dashed border-primary flex items-center justify-center text-primary opacity-50">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">add</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<span class="material-symbols-outlined text-secondary text-[16px]">auto_awesome</span>
|
||||||
|
<span class="text-on-surface italic opacity-60">신규 입점 예정...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4" colspan="6">
|
||||||
|
<p class="text-body-sm text-on-surface-variant italic">임시 데이터 분석 중: BEXCO (부산) 테넌트 구성 제안됨</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="px-6 py-3 bg-white border-t border-outline-variant flex justify-between items-center">
|
||||||
|
<span class="text-label-xs text-on-surface-variant">전체 2개의 테넌트 표시됨</span>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="p-1 rounded border border-outline-variant disabled:opacity-30" disabled="">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-1 rounded border border-outline-variant">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Right: Venue Onboarding Wizard (30%) -->
|
||||||
|
<div class="col-span-3 space-y-gutter">
|
||||||
|
<section class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden flex flex-col">
|
||||||
|
<div class="px-5 py-4 border-b border-outline-variant bg-white">
|
||||||
|
<div class="flex items-center justify-between mb-1">
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface">전시관 온보딩</h3>
|
||||||
|
<span class="bg-primary/10 text-primary text-[10px] px-2 py-0.5 rounded-full font-bold">진행 중 (4/7)</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-label-md text-on-surface-variant font-normal">코엑스 (COEX) 설정 프로세스</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-5">
|
||||||
|
<ul class="relative space-y-4 before:content-[''] before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[1px] before:bg-outline-variant">
|
||||||
|
<!-- Completed -->
|
||||||
|
<li class="relative flex items-start gap-4">
|
||||||
|
<div class="z-10 w-6 h-6 rounded-full bg-tertiary text-white flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-label-md text-label-md text-on-surface">테넌트 생성</p>
|
||||||
|
<p class="text-[11px] text-tertiary">완료: 2023.10.24</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<!-- Completed -->
|
||||||
|
<li class="relative flex items-start gap-4">
|
||||||
|
<div class="z-10 w-6 h-6 rounded-full bg-tertiary text-white flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-label-md text-label-md text-on-surface">서브도메인 설정</p>
|
||||||
|
<p class="text-[11px] text-tertiary">완료: coex.wise.ai.kr</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<!-- Completed -->
|
||||||
|
<li class="relative flex items-start gap-4">
|
||||||
|
<div class="z-10 w-6 h-6 rounded-full bg-tertiary text-white flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-label-md text-label-md text-on-surface">브랜딩 (CI/BI)</p>
|
||||||
|
<p class="text-[11px] text-tertiary">자산 업로드 완료</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<!-- Active -->
|
||||||
|
<li class="relative flex items-start gap-4 step-active">
|
||||||
|
<div class="z-10 w-6 h-6 rounded-full bg-primary-container text-white flex items-center justify-center ring-4 ring-primary-container/20">
|
||||||
|
<span class="text-[11px] font-bold">4</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-label-md text-label-md text-primary">마스터데이터 입력</p>
|
||||||
|
<p class="text-[11px] text-on-surface-variant">홀 정보 및 도면 데이터 업로드 중...</p>
|
||||||
|
<div class="mt-3 bg-surface-container-low p-2.5 rounded border border-outline-variant/30">
|
||||||
|
<div class="flex justify-between text-[10px] mb-1">
|
||||||
|
<span>데이터 무결성 검사</span>
|
||||||
|
<span class="font-bold text-primary">65%</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-surface-container h-1 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-primary h-full transition-all duration-1000" style="width: 65%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<!-- Pending -->
|
||||||
|
<li class="relative flex items-start gap-4 opacity-50">
|
||||||
|
<div class="z-10 w-6 h-6 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center">
|
||||||
|
<span class="text-[11px] font-bold">5</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-label-md text-label-md">관리자 계정 생성</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<!-- Pending -->
|
||||||
|
<li class="relative flex items-start gap-4 opacity-50">
|
||||||
|
<div class="z-10 w-6 h-6 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center">
|
||||||
|
<span class="text-[11px] font-bold">6</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-label-md text-label-md">격리 스모크 테스트</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<!-- Pending -->
|
||||||
|
<li class="relative flex items-start gap-4 opacity-50">
|
||||||
|
<div class="z-10 w-6 h-6 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center">
|
||||||
|
<span class="text-[11px] font-bold">7</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-label-md text-label-md">활성화</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="mt-auto p-4 bg-secondary-container/5 border-t border-secondary-container/10">
|
||||||
|
<div class="flex gap-2 items-start text-secondary">
|
||||||
|
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">info</span>
|
||||||
|
<div>
|
||||||
|
<p class="text-[11px] font-bold leading-tight">시스템 안내</p>
|
||||||
|
<p class="text-[11px] opacity-80 leading-snug">코드 배포 없이 데이터 온보딩 기반으로 실시간 활성화가 가능합니다.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Deployment Stats Small Card -->
|
||||||
|
<div class="bg-surface-container border border-outline-variant rounded-lg p-5">
|
||||||
|
<h4 class="font-label-md text-label-md text-on-surface mb-3 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[18px]">cloud_sync</span>
|
||||||
|
클러스터 리소스 현황
|
||||||
|
</h4>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-body-sm text-on-surface-variant">API Latency</span>
|
||||||
|
<span class="font-label-md text-tertiary">24ms (Healthy)</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-body-sm text-on-surface-variant">Storage Usage</span>
|
||||||
|
<span class="font-label-md">1.2TB / 5.0TB</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-outline-variant/20 h-1.5 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-primary-container h-full" style="width: 24%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Bottom Quick Actions / Info -->
|
||||||
|
<div class="grid grid-cols-4 gap-gutter">
|
||||||
|
<div class="bg-white border border-outline-variant p-4 rounded-lg flex items-center gap-4 hover:shadow-md transition-shadow cursor-pointer">
|
||||||
|
<div class="w-12 h-12 rounded bg-primary/5 flex items-center justify-center text-primary">
|
||||||
|
<span class="material-symbols-outlined text-[28px]">dns</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-label-md font-bold text-on-surface">도메인 매핑</p>
|
||||||
|
<p class="text-[11px] text-on-surface-variant">CNAME 및 SSL 인증서 관리</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white border border-outline-variant p-4 rounded-lg flex items-center gap-4 hover:shadow-md transition-shadow cursor-pointer">
|
||||||
|
<div class="w-12 h-12 rounded bg-tertiary/5 flex items-center justify-center text-tertiary">
|
||||||
|
<span class="material-symbols-outlined text-[28px]">database</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-label-md font-bold text-on-surface">DB 샤딩 현황</p>
|
||||||
|
<p class="text-[11px] text-on-surface-variant">테넌트별 데이터 격리 수준 확인</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white border border-outline-variant p-4 rounded-lg flex items-center gap-4 hover:shadow-md transition-shadow cursor-pointer">
|
||||||
|
<div class="w-12 h-12 rounded bg-secondary/5 flex items-center justify-center text-secondary">
|
||||||
|
<span class="material-symbols-outlined text-[28px]">verified_user</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-label-md font-bold text-on-surface">IAM 정책 관리</p>
|
||||||
|
<p class="text-[11px] text-on-surface-variant">관리자 권한 및 역할 배분</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white border border-outline-variant p-4 rounded-lg flex items-center gap-4 hover:shadow-md transition-shadow cursor-pointer">
|
||||||
|
<div class="w-12 h-12 rounded bg-error-container/20 flex items-center justify-center text-error">
|
||||||
|
<span class="material-symbols-outlined text-[28px]">security_update_warning</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-label-md font-bold text-on-surface">보안 모니터링</p>
|
||||||
|
<p class="text-[11px] text-on-surface-variant">비정상 접근 시도 탐지 (0)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- FAB for Global Super Admin Support -->
|
||||||
|
<button class="fixed bottom-8 right-8 w-14 h-14 bg-primary text-white rounded-full shadow-lg flex items-center justify-center hover:scale-105 active:scale-95 transition-all z-50">
|
||||||
|
<span class="material-symbols-outlined text-[28px]">support_agent</span>
|
||||||
|
</button>
|
||||||
|
<script>
|
||||||
|
// Simple micro-interaction for the onboarding progress
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const progress = document.querySelector('.bg-primary.h-full');
|
||||||
|
if (progress) {
|
||||||
|
setTimeout(() => {
|
||||||
|
progress.style.width = '78%';
|
||||||
|
document.querySelector('.text-primary.font-bold').innerText = '78%';
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
236
stitch_kintex_ai_system_architect/scr_m15/code.html
Normal file
236
stitch_kintex_ai_system_architect/scr_m15/code.html
Normal file
@ -0,0 +1,236 @@
|
|||||||
|
<!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>
|
||||||
@ -0,0 +1,297 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="light" lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=390, user-scalable=no" name="viewport"/>
|
||||||
|
<title>스마트팩토리 코리아 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@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"/>
|
||||||
|
<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": {
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"outline": "#717782",
|
||||||
|
"inverse-on-surface": "#edf0ff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"surface-tint": "#0060a9",
|
||||||
|
"primary": "#004e8b",
|
||||||
|
"surface-container-highest": "#dbe2f9",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"background": "#f9f9ff",
|
||||||
|
"surface-dim": "#d2daf0",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"tertiary": "#00583b",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"inverse-surface": "#293041",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"on-primary-container": "#d2e3ff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"surface": "#f9f9ff",
|
||||||
|
"primary-container": "#0066b3",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-surface-variant": "#414751",
|
||||||
|
"surface-container-high": "#e0e8ff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"tertiary-container": "#00734e",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"surface-variant": "#dbe2f9",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"surface-container": "#e9edff",
|
||||||
|
"on-tertiary-container": "#8ef7c3",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"on-surface": "#141b2c"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-sm": "8px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"display-lg-mobile": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"label-md": ["Geist"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "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"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body { width: 390px; margin: 0 auto; min-height: 100vh; position: relative; background: #f9f9ff; overflow-x: hidden; }
|
||||||
|
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; display: inline-block; vertical-align: middle; }
|
||||||
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||||
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
min-height: max(884px, 100dvh);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="font-body-base text-on-surface">
|
||||||
|
<!-- Top AppBar (from Shared Components JSON) -->
|
||||||
|
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-container-padding h-16 bg-surface border-b border-outline-variant">
|
||||||
|
<button class="transition-colors duration-200 active:opacity-80 p-2 -ml-2">
|
||||||
|
<span class="material-symbols-outlined text-primary">arrow_back</span>
|
||||||
|
</button>
|
||||||
|
<h1 class="font-headline-md text-headline-md font-bold text-primary">알림</h1>
|
||||||
|
<button class="transition-colors duration-200 active:opacity-80 p-2 -mr-2">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant">settings</span>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
<main class="pt-16 pb-40">
|
||||||
|
<!-- Event Summary Chip -->
|
||||||
|
<div class="px-gutter pt-stack-md">
|
||||||
|
<div class="bg-surface-container-high rounded-full px-4 py-2 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[18px]">calendar_today</span>
|
||||||
|
<span class="font-label-md text-label-md text-on-surface">스마트팩토리 코리아 2026 · 제2전시장 홀7</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Step Indicator -->
|
||||||
|
<div class="px-gutter pt-stack-md flex justify-between items-center">
|
||||||
|
<div class="flex flex-col items-center gap-1 group">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-[14px]">1</div>
|
||||||
|
<span class="font-label-xs text-label-xs text-primary font-bold">권종</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-[1px] flex-1 bg-outline-variant mx-2 -translate-y-2"></div>
|
||||||
|
<div class="flex flex-col items-center gap-1 opacity-40">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container-highest text-on-surface-variant flex items-center justify-center font-bold text-[14px]">2</div>
|
||||||
|
<span class="font-label-xs text-label-xs text-on-surface-variant">예매자</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-[1px] flex-1 bg-outline-variant mx-2 -translate-y-2"></div>
|
||||||
|
<div class="flex flex-col items-center gap-1 opacity-40">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container-highest text-on-surface-variant flex items-center justify-center font-bold text-[14px]">3</div>
|
||||||
|
<span class="font-label-xs text-label-xs text-on-surface-variant">결제</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-[1px] flex-1 bg-outline-variant mx-2 -translate-y-2"></div>
|
||||||
|
<div class="flex flex-col items-center gap-1 opacity-40">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container-highest text-on-surface-variant flex items-center justify-center font-bold text-[14px]">4</div>
|
||||||
|
<span class="font-label-xs text-label-xs text-on-surface-variant">완료</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Ticket Type Stack -->
|
||||||
|
<div class="px-gutter pt-stack-lg flex flex-col gap-stack-md">
|
||||||
|
<!-- Card: 일반권 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-4 flex flex-col gap-4 relative overflow-hidden">
|
||||||
|
<div class="absolute left-0 top-0 w-1 h-full bg-primary"></div>
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface">일반권</h3>
|
||||||
|
<div class="flex items-center gap-2 mt-1">
|
||||||
|
<span class="font-headline-md text-headline-md text-on-surface">₩0</span>
|
||||||
|
<span class="bg-primary-container text-on-primary-container text-[10px] px-2 py-0.5 rounded font-bold">사전등록 할인가</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center bg-surface-container rounded-lg">
|
||||||
|
<button aria-label="감소" class="w-12 h-12 flex items-center justify-center active:bg-surface-variant transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">remove</span>
|
||||||
|
</button>
|
||||||
|
<span class="w-8 text-center font-title-sm">0</span>
|
||||||
|
<button aria-label="증가" class="w-12 h-12 flex items-center justify-center active:bg-surface-variant transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">add</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card: 바이어권 (AI OPTIMIZED) -->
|
||||||
|
<div class="bg-surface-container-lowest border-[1.5px] border-secondary rounded-xl p-4 flex flex-col gap-4 relative overflow-hidden">
|
||||||
|
<div class="absolute left-0 top-0 w-1 h-full bg-secondary"></div>
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface">바이어권</h3>
|
||||||
|
<span class="border border-secondary text-secondary font-label-xs text-label-xs px-2 py-0.5 rounded flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[12px]" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
AI OPTIMIZED
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant mt-1">무료 (자격심사 필요)</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center bg-surface-container rounded-lg">
|
||||||
|
<button class="w-12 h-12 flex items-center justify-center active:bg-surface-variant transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">remove</span>
|
||||||
|
</button>
|
||||||
|
<span class="w-8 text-center font-title-sm">0</span>
|
||||||
|
<button class="w-12 h-12 flex items-center justify-center active:bg-surface-variant transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">add</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-[11px] text-secondary font-medium">※ 업종 및 직무 AI 매칭을 통해 추천된 권종입니다.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Card: 단체권 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-4 flex flex-col gap-4 relative overflow-hidden">
|
||||||
|
<div class="absolute left-0 top-0 w-1 h-full bg-tertiary"></div>
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface">단체권</h3>
|
||||||
|
<div class="flex items-center gap-2 mt-1">
|
||||||
|
<span class="font-headline-md text-headline-md text-on-surface">₩9,000</span>
|
||||||
|
<span class="text-error font-bold text-label-md">10% OFF</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant">10인 이상 단체 구매시 적용</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center bg-surface-container rounded-lg">
|
||||||
|
<button class="w-12 h-12 flex items-center justify-center active:bg-surface-variant transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">remove</span>
|
||||||
|
</button>
|
||||||
|
<span class="w-8 text-center font-title-sm">1</span>
|
||||||
|
<button class="w-12 h-12 flex items-center justify-center active:bg-surface-variant transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">add</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card: VIP권 (Sold Out) -->
|
||||||
|
<div class="bg-surface-container-low border border-outline-variant/30 opacity-60 rounded-xl p-4 flex flex-col gap-4 relative overflow-hidden grayscale">
|
||||||
|
<div class="absolute inset-0 bg-surface/50 pointer-events-none"></div>
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface">VIP권</h3>
|
||||||
|
<span class="bg-on-surface-variant text-white font-label-xs text-label-xs px-2 py-0.5 rounded">매진</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-headline-md text-headline-md text-on-surface mt-1">₩50,000</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center bg-surface-container/50 rounded-lg pointer-events-none">
|
||||||
|
<button class="w-12 h-12 flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">remove</span>
|
||||||
|
</button>
|
||||||
|
<span class="w-8 text-center font-title-sm">0</span>
|
||||||
|
<button class="w-12 h-12 flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">add</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Payment Reference Section -->
|
||||||
|
<div class="px-gutter pt-stack-lg pb-10">
|
||||||
|
<h4 class="font-label-md text-label-md text-on-surface-variant mb-stack-sm">결제 수단 미리보기</h4>
|
||||||
|
<div class="flex gap-2 overflow-x-auto no-scrollbar">
|
||||||
|
<div class="flex-shrink-0 px-4 py-2 bg-surface-container border border-outline-variant rounded-full text-body-sm text-on-surface">신용카드</div>
|
||||||
|
<div class="flex-shrink-0 px-4 py-2 bg-surface-container border border-outline-variant rounded-full text-body-sm text-on-surface">간편결제</div>
|
||||||
|
<div class="flex-shrink-0 px-4 py-2 bg-surface-container border border-outline-variant rounded-full text-body-sm text-on-surface">계좌이체</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-stack-lg p-4 bg-surface-container-low rounded-xl border border-dashed border-outline-variant">
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant text-[20px]">security</span>
|
||||||
|
<p class="text-[12px] leading-[18px] text-on-surface-variant">
|
||||||
|
결제는 PG사 보안 페이지에서 진행되며 카드정보는 저장되지 않습니다. 스마트팩토리 코리아 운영국은 고객님의 소중한 정보를 보호합니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Bottom Sticky Bar -->
|
||||||
|
<div class="fixed bottom-0 w-full bg-surface border-t border-outline-variant px-gutter pt-stack-sm pb-safe shadow-[0_-4px_12px_rgba(0,0,0,0.05)]">
|
||||||
|
<div class="flex justify-between items-center mb-4">
|
||||||
|
<span class="font-body-base text-on-surface-variant">선택한 티켓 1매</span>
|
||||||
|
<span class="font-headline-md text-headline-md text-primary font-bold">합계 ₩9,000</span>
|
||||||
|
</div>
|
||||||
|
<button class="w-full h-14 bg-primary-container text-on-primary-container font-headline-md text-headline-md rounded-xl transition-all active:scale-[0.98] active:bg-primary flex items-center justify-center gap-2 mb-2">
|
||||||
|
다음
|
||||||
|
<span class="material-symbols-outlined">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Micro-interaction Script -->
|
||||||
|
<script>
|
||||||
|
document.querySelectorAll('button[aria-label]').forEach(btn => {
|
||||||
|
btn.addEventListener('click', function() {
|
||||||
|
const isAdd = this.getAttribute('aria-label') === '증가';
|
||||||
|
const span = this.parentElement.querySelector('span');
|
||||||
|
let val = parseInt(span.textContent);
|
||||||
|
if (isAdd) {
|
||||||
|
val++;
|
||||||
|
} else {
|
||||||
|
val = Math.max(0, val - 1);
|
||||||
|
}
|
||||||
|
span.textContent = val;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
369
stitch_kintex_ai_system_architect/scr_p1/code.html
Normal file
369
stitch_kintex_ai_system_architect/scr_p1/code.html
Normal file
@ -0,0 +1,369 @@
|
|||||||
|
<!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 - 대한민국 최대 전시 컨벤션 센터</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Geist:wght@500;600&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"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter:wght@100..900&display=swap" rel="stylesheet"/>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"inverse-surface": "#293041",
|
||||||
|
"primary-container": "#0066b3",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"tertiary-container": "#00734e",
|
||||||
|
"surface-container-highest": "#dbe2f9",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-tertiary-container": "#8ef7c3",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"inverse-on-surface": "#edf0ff",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"background": "#f9f9ff",
|
||||||
|
"tertiary": "#00583b",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"surface-variant": "#dbe2f9",
|
||||||
|
"outline": "#717782",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"primary": "#004e8b",
|
||||||
|
"surface-tint": "#0060a9",
|
||||||
|
"surface": "#f9f9ff",
|
||||||
|
"surface-dim": "#d2daf0",
|
||||||
|
"surface-container-high": "#e0e8ff",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"surface-container": "#e9edff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"on-surface-variant": "#414751",
|
||||||
|
"on-primary-container": "#d2e3ff",
|
||||||
|
"on-secondary-container": "#f3edff"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"base": "4px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"stack-sm": "8px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"display-lg-mobile": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"body-base": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body { font-family: 'Inter', sans-serif; }
|
||||||
|
.hanken-grotesk { font-family: 'Inter', sans-serif; } /* Fallback to Inter as specified in config but requested name was Hanken */
|
||||||
|
.glass-card {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(228, 231, 236, 0.5);
|
||||||
|
}
|
||||||
|
.text-shadow-sm { text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
||||||
|
.card-accent-primary { border-left: 4px solid #004e8b; }
|
||||||
|
.card-accent-secondary { border-left: 4px solid #6d4aff; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-surface">
|
||||||
|
<!-- Header: TopNavBar -->
|
||||||
|
<header class="bg-surface-bright dark:bg-inverse-surface border-b border-outline-variant dark:border-outline sticky top-0 z-50 transition-all duration-200 ease-in-out">
|
||||||
|
<div class="flex justify-between items-center w-full px-container-padding h-20 max-w-7xl mx-auto">
|
||||||
|
<div class="flex items-center gap-12">
|
||||||
|
<a class="flex items-center" href="/">
|
||||||
|
<img alt="KINTEX Logo" class="h-10 w-auto" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA-M3_GRmeezcKzj55FfdvS7tjC9eBhOVs3UE0ZG5nCa9c-8_-fzlSYIEfmxMZyISVmKg9qmwJmtQ_vqPk0ZMhriFA-pmaWrT5PGyghX7qtqsE_W7spVegK6f0xXdHanECc7o_Q-GHrV8S725BwSgSnnXZKeXapvDYUNjz_R4373GFTyB5e8_UZv2zh8fY4v9IEQF8y7c1U2g7NjxkpCdKtNeCq2vS_YVXQdqyxFWjR87UXNNfWOy4lAu6c1McKoGGr7TDUktMJC5s"/>
|
||||||
|
</a>
|
||||||
|
<nav class="hidden md:flex gap-8">
|
||||||
|
<a class="font-title-sm text-title-sm text-primary dark:text-primary-fixed border-b-2 border-primary font-bold pb-1 transition-colors" href="#">행사</a>
|
||||||
|
<a class="font-title-sm text-title-sm text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors" href="#">참가안내</a>
|
||||||
|
<a class="font-title-sm text-title-sm text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors" href="#">관람안내</a>
|
||||||
|
<a class="font-title-sm text-title-sm text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors" href="#">교통</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<div class="hidden md:flex items-center bg-surface-container-low px-4 py-2 rounded-full border border-outline-variant">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant mr-2" style="font-size: 20px;">search</span>
|
||||||
|
<input class="bg-transparent border-none focus:ring-0 text-body-sm font-body-sm w-40" placeholder="행사 검색" type="text"/>
|
||||||
|
</div>
|
||||||
|
<button class="font-title-sm text-title-sm text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors flex items-center gap-1">
|
||||||
|
Language <span class="material-symbols-outlined">expand_more</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="relative h-[700px] w-full flex items-center overflow-hidden">
|
||||||
|
<div class="absolute inset-0 z-0">
|
||||||
|
<div class="w-full h-full bg-cover bg-center transition-transform duration-1000 hover:scale-105" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDU9oe5Fbg07m-0ZLP7yL5owsjkcYbUJEKQENv9ska98Wwl7hQG35YduX6vwFxU9XiUIj85cqf8qsnXVOmCqzhbtXh_jdL62fXtO2bJnlncry5Ry-mIaQn0Wsot4rLHXAo_56JAz0se68aBo11gBJdfqEo8cFPvTTM4Jl35ymR06MaeYQSG0iH_1ULJDcandXdfcqQJOhpx_sq06drATCdPQbKdgOcRZma6LMMvy_Uf7Vuva5Z6KYEHAYFIWPlNYVCB-rDr1Rzd1l4');"></div>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-r from-on-background/60 to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
<div class="relative z-10 max-w-7xl mx-auto px-container-padding w-full">
|
||||||
|
<div class="max-w-2xl space-y-stack-lg">
|
||||||
|
<div class="inline-flex items-center px-4 py-1.5 rounded-full bg-primary-container text-on-primary-container font-label-md text-label-md border border-on-primary-container/20">
|
||||||
|
Global Exhibition Platform
|
||||||
|
</div>
|
||||||
|
<h1 class="font-display-lg text-display-lg text-white text-shadow-sm leading-tight">
|
||||||
|
세계로 통하는 전시,<br/><span class="text-primary-fixed">킨텍스</span>
|
||||||
|
</h1>
|
||||||
|
<p class="text-white/90 font-title-sm text-title-sm max-w-lg">
|
||||||
|
대한민국 최대 규모의 전시 컨벤션 센터 KINTEX에서 펼쳐지는 비즈니스와 문화의 새로운 혁신을 경험하세요.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap gap-stack-md pt-4">
|
||||||
|
<button class="bg-primary text-on-primary px-8 py-4 rounded-lg font-title-sm text-title-sm hover:bg-primary/90 transition-all shadow-lg hover:shadow-primary/20">
|
||||||
|
관람 사전등록
|
||||||
|
</button>
|
||||||
|
<button class="bg-white/10 backdrop-blur-md text-white border border-white/20 px-8 py-4 rounded-lg font-title-sm text-title-sm hover:bg-white/20 transition-all">
|
||||||
|
시설 안내 보기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Event Grid Section -->
|
||||||
|
<section class="py-24 max-w-7xl mx-auto px-container-padding">
|
||||||
|
<div class="flex justify-between items-end mb-12">
|
||||||
|
<div class="space-y-base">
|
||||||
|
<h2 class="font-display-lg text-display-lg text-on-background">진행중 · 예정 행사</h2>
|
||||||
|
<p class="text-on-surface-variant font-body-base">지금 킨텍스에서 열리는 주요 소식을 확인하세요.</p>
|
||||||
|
</div>
|
||||||
|
<a class="text-primary font-label-md text-label-md flex items-center gap-1 hover:underline" href="#">
|
||||||
|
전체 일정 보기 <span class="material-symbols-outlined">arrow_forward</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-gutter">
|
||||||
|
<!-- Card 1 -->
|
||||||
|
<div class="flex flex-col bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden group hover:shadow-xl transition-all duration-300 card-accent-primary">
|
||||||
|
<div class="relative overflow-hidden h-[320px]">
|
||||||
|
<img alt="Smart Factory & AI Expo" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCq7fe9NtQp2RqwGIajnWhC4pWLhhC7ZqG5_G3qHFJC0I1nSiMVH8kzPaDb9fVBHKF5W9DHv5XZ1nsu3u1wB1HCOhi_Eh2wih9FdqbnofNw951tf7n-7xwLHNQ-ueQa-YAWFhYpXQm8kXu0Vv_aUAR2F_Igiy3za_QXG2IEfyhOAmSfJVFi-uR4n4BjfwV0puIBYHvaTldIoi3aQ49WMeRDBuRLI4lDejpkYxEzKOOzHndBdaFS9LNpzvyY-esp5xH-tqog7ywldjk"/>
|
||||||
|
<div class="absolute top-4 right-4">
|
||||||
|
<span class="bg-secondary-container text-on-secondary-container font-label-md text-label-md px-3 py-1 rounded-full flex items-center gap-1 shadow-sm">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">auto_awesome</span> AI Optimized
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="absolute bottom-4 left-4">
|
||||||
|
<span class="bg-error text-white font-label-md text-label-md px-3 py-1 rounded-lg shadow-md">D-15</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 flex flex-col flex-grow">
|
||||||
|
<div class="flex gap-2 mb-3">
|
||||||
|
<span class="text-primary font-label-xs text-label-xs bg-primary-fixed px-2 py-0.5 rounded">EXHIBITION</span>
|
||||||
|
<span class="text-tertiary font-label-xs text-label-xs bg-tertiary-fixed px-2 py-0.5 rounded">TECH</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface mb-4 group-hover:text-primary transition-colors">스마트팩토리 & AI 엑스포 2026</h3>
|
||||||
|
<div class="space-y-2 mb-6 flex-grow">
|
||||||
|
<div class="flex items-center text-on-surface-variant font-body-sm">
|
||||||
|
<span class="material-symbols-outlined mr-2 text-[18px]">calendar_today</span>
|
||||||
|
2026.08.18 - 08.21
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center text-on-surface-variant font-body-sm">
|
||||||
|
<span class="material-symbols-outlined mr-2 text-[18px]">location_on</span>
|
||||||
|
제1전시장 1~5홀
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="w-full py-3 bg-primary text-on-primary rounded-lg font-label-md text-label-md hover:bg-primary-container transition-colors">
|
||||||
|
사전등록
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 2 -->
|
||||||
|
<div class="flex flex-col bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden group hover:shadow-xl transition-all duration-300 card-accent-secondary">
|
||||||
|
<div class="relative overflow-hidden h-[320px]">
|
||||||
|
<img alt="Comic World Summer" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC7LFJbuhezhuxjBuBE4dc4JqcMEW1UE_DwXS7V4RViuzf9j_sK_rAcgrypTJX-mdfOQ3XWJLz_Mpg287C3OWFipT3Y6lYPpGrCXh2SHwXsNIaKCrZwGi8LgaUEFmmxBHf37gaG7VAoZ9XLant7dbcV5GBRa3Nje9-p5vIoKvYpFq-cRXTpwqhhVxRX4xMzDy_93wHgYJJulSJj3D-PhdpFTZW9qJznMpZAO_StxmoOpa9jhoGbs5hOlVqtjV9iIs5BqyM5mCiH9TA"/>
|
||||||
|
<div class="absolute bottom-4 left-4">
|
||||||
|
<span class="bg-error text-white font-label-md text-label-md px-3 py-1 rounded-lg shadow-md">D-7</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 flex flex-col flex-grow">
|
||||||
|
<div class="flex gap-2 mb-3">
|
||||||
|
<span class="text-secondary font-label-xs text-label-xs bg-secondary-fixed px-2 py-0.5 rounded">CULTURE</span>
|
||||||
|
<span class="text-primary font-label-xs text-label-xs bg-primary-fixed px-2 py-0.5 rounded">FESTIVAL</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface mb-4 group-hover:text-secondary transition-colors">코믹월드 썸머 2026</h3>
|
||||||
|
<div class="space-y-2 mb-6 flex-grow">
|
||||||
|
<div class="flex items-center text-on-surface-variant font-body-sm">
|
||||||
|
<span class="material-symbols-outlined mr-2 text-[18px]">calendar_today</span>
|
||||||
|
2026.07.24 - 07.26
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center text-on-surface-variant font-body-sm">
|
||||||
|
<span class="material-symbols-outlined mr-2 text-[18px]">location_on</span>
|
||||||
|
제2전시장 7, 8홀
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="w-full py-3 bg-secondary text-on-secondary rounded-lg font-label-md text-label-md hover:opacity-90 transition-colors">
|
||||||
|
사전등록
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 3 -->
|
||||||
|
<div class="flex flex-col bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden group hover:shadow-xl transition-all duration-300 card-accent-primary">
|
||||||
|
<div class="relative overflow-hidden h-[320px]">
|
||||||
|
<img alt="Korea International Boat Show" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuANn42Qk7WkWC1iRK_E9jGoNoC9y_2PdSikoh7xMECX8eQ4e1VK_ZoQjh5bIljSp-HqUJnFKUGyS-YN1t2ak2AcM4WxkV_2aWsU4bwWEeOeT4a5WyaRuWTU3ZM8FhnlTS8TUYwm9eAsJRoI_CtlhaMSmci9GQBQxxwNpa_jJyN2-7YJPcbkGF6CpyNAYJqjulLCVa5WTQ75xtUW3sUEC1EK7UewPTbmaSStyrjEc2KSbFOU43uHhVIDhS2GbznFNFwgx_k8Ce8Ceqg"/>
|
||||||
|
<div class="absolute bottom-4 left-4">
|
||||||
|
<span class="bg-outline text-white font-label-md text-label-md px-3 py-1 rounded-lg shadow-md">D-45</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 flex flex-col flex-grow">
|
||||||
|
<div class="flex gap-2 mb-3">
|
||||||
|
<span class="text-primary font-label-xs text-label-xs bg-primary-fixed px-2 py-0.5 rounded">EXHIBITION</span>
|
||||||
|
<span class="text-tertiary font-label-xs text-label-xs bg-tertiary-fixed px-2 py-0.5 rounded">LEISURE</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface mb-4 group-hover:text-primary transition-colors">경기 국제 보트쇼 2026</h3>
|
||||||
|
<div class="space-y-2 mb-6 flex-grow">
|
||||||
|
<div class="flex items-center text-on-surface-variant font-body-sm">
|
||||||
|
<span class="material-symbols-outlined mr-2 text-[18px]">calendar_today</span>
|
||||||
|
2026.04.11 - 04.14
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center text-on-surface-variant font-body-sm">
|
||||||
|
<span class="material-symbols-outlined mr-2 text-[18px]">location_on</span>
|
||||||
|
제1전시장 3, 4, 5홀
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="w-full py-3 bg-primary text-on-primary rounded-lg font-label-md text-label-md hover:bg-primary-container transition-colors">
|
||||||
|
사전등록
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Transport Section -->
|
||||||
|
<section class="bg-surface-container-low py-24">
|
||||||
|
<div class="max-w-7xl mx-auto px-container-padding">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<div class="space-y-stack-lg">
|
||||||
|
<div class="space-y-base">
|
||||||
|
<h2 class="font-display-lg text-display-lg text-on-background">오시는 길</h2>
|
||||||
|
<p class="text-on-surface-variant font-body-base">더욱 빨라진 접근성으로 킨텍스를 만나보세요.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-bright p-6 rounded-xl border border-primary-container/20 flex items-center gap-6 shadow-sm">
|
||||||
|
<div class="w-16 h-16 rounded-full bg-primary-fixed flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[32px]">directions_subway</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-title-sm text-title-sm text-primary mb-1">GTX-A 킨텍스역 개통</h4>
|
||||||
|
<p class="text-on-surface-variant font-body-sm">킨텍스역에서 <span class="font-bold text-on-surface">도보 3분</span> 거리</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-gutter">
|
||||||
|
<div class="p-4 bg-white rounded-lg border border-outline-variant hover:border-primary transition-colors cursor-pointer group">
|
||||||
|
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors mb-2">directions_bus</span>
|
||||||
|
<h5 class="font-label-md text-label-md text-on-background">대중교통</h5>
|
||||||
|
<p class="text-on-surface-variant text-[12px] mt-1">광역버스 및 지하철</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 bg-white rounded-lg border border-outline-variant hover:border-primary transition-colors cursor-pointer group">
|
||||||
|
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors mb-2">local_parking</span>
|
||||||
|
<h5 class="font-label-md text-label-md text-on-background">주차안내</h5>
|
||||||
|
<p class="text-on-surface-variant text-[12px] mt-1">4,000대 동시 주차</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 bg-white rounded-lg border border-outline-variant hover:border-primary transition-colors cursor-pointer group">
|
||||||
|
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors mb-2">airport_shuttle</span>
|
||||||
|
<h5 class="font-label-md text-label-md text-on-background">셔틀버스</h5>
|
||||||
|
<p class="text-on-surface-variant text-[12px] mt-1">주요 거점 순환 노선</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="relative h-[450px] rounded-2xl overflow-hidden shadow-2xl border border-white">
|
||||||
|
<div class="w-full h-full bg-cover bg-center" data-alt="A clean, minimalist 3D map illustration showing the KINTEX exhibition center in Ilsan, South Korea. The map highlights the proximity of the new GTX-A Kintex station and the sprawling first and second exhibition halls. Soft blue and white color palette to match the corporate branding, with clear icons for parking and entrances." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDDnIFn5uHvJjh44-iop988WBdAfyRz-D84npYlj32BOTFg9JGvepf_fzWLnVih5ob788ol5x6CZ1IikOmhLBSJ-uOir237zi23QiarN_EPcpNKMSOx05IzXm_709tO07_u5CsyEKzahauLwCOzdj-mTfo5QqqYg_I8w_v0MXea1BmskxlHU2nnfHe9TI_lEGpicgj8Yszyv3LxsyjqWtbPYD5krqkptVBextjoMfFlwBajEkiVkDHl8-lCYNqqBcMAkkVphNzOEaY')"></div>
|
||||||
|
<div class="absolute bottom-6 left-6 right-6 glass-card p-6 rounded-xl flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-label-md text-on-surface-variant">고양시 일산서구 킨텍스로 217-60</p>
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-background">KINTEX (대한민국 제1, 2전시장)</h3>
|
||||||
|
</div>
|
||||||
|
<button class="bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center hover:scale-110 transition-transform">
|
||||||
|
<span class="material-symbols-outlined">map</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<!-- Footer: Footer -->
|
||||||
|
<footer class="bg-on-background dark:bg-on-background w-full py-stack-lg px-container-padding flex flex-col items-center text-center space-y-stack-md">
|
||||||
|
<div class="font-headline-md text-headline-md text-surface-container-lowest mb-2">KINTEX</div>
|
||||||
|
<nav class="flex flex-wrap justify-center gap-6 mb-8">
|
||||||
|
<a class="font-body-sm text-body-sm text-surface-variant opacity-80 hover:text-surface-bright transition-opacity" href="#">Sitemap</a>
|
||||||
|
<a class="font-body-sm text-body-sm text-surface-bright underline transition-opacity" href="#">Privacy Policy</a>
|
||||||
|
<a class="font-body-sm text-body-sm text-surface-variant opacity-80 hover:text-surface-bright transition-opacity" href="#">Terms of Service</a>
|
||||||
|
<a class="font-body-sm text-body-sm text-surface-variant opacity-80 hover:text-surface-bright transition-opacity" href="#">Facebook</a>
|
||||||
|
<a class="font-body-sm text-body-sm text-surface-variant opacity-80 hover:text-surface-bright transition-opacity" href="#">Instagram</a>
|
||||||
|
<a class="font-body-sm text-body-sm text-surface-variant opacity-80 hover:text-surface-bright transition-opacity" href="#">YouTube</a>
|
||||||
|
</nav>
|
||||||
|
<div class="max-w-3xl border-t border-white/10 pt-8">
|
||||||
|
<p class="font-body-sm text-body-sm text-surface-container-lowest opacity-60">
|
||||||
|
© KINTEX. All Rights Reserved. (10390) 217-60, Kintex-ro, Ilsanseo-gu, Goyang-si, Gyeonggi-do
|
||||||
|
</p>
|
||||||
|
<p class="font-body-sm text-body-sm text-surface-container-lowest opacity-40 mt-2">
|
||||||
|
대표번호: 1899-1001 | 팩스: 031-810-8114
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
// Micro-interactions
|
||||||
|
document.querySelectorAll('button, a').forEach(el => {
|
||||||
|
el.addEventListener('mousedown', () => el.style.transform = 'scale(0.98)');
|
||||||
|
el.addEventListener('mouseup', () => el.style.transform = 'scale(1)');
|
||||||
|
el.addEventListener('mouseleave', () => el.style.transform = 'scale(1)');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Header scroll effect
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const header = document.querySelector('header');
|
||||||
|
if (window.scrollY > 20) {
|
||||||
|
header.classList.add('shadow-md', 'h-16');
|
||||||
|
header.classList.remove('h-20');
|
||||||
|
} else {
|
||||||
|
header.classList.remove('shadow-md', 'h-16');
|
||||||
|
header.classList.add('h-20');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
502
stitch_kintex_ai_system_architect/scr_p2/code.html
Normal file
502
stitch_kintex_ai_system_architect/scr_p2/code.html
Normal file
@ -0,0 +1,502 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>스마트팩토리 코리아 2026 | KINTEX</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Geist:wght@400;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": {
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"primary": "#003765",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"outline": "#727781",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"outline-variant": "#c2c7d1",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"kintex-blue": "#0066B3"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"base": "4px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"stack-md": "16px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"label-xs": ["Geist"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"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"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.glass-nav {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
-webkit-backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
.sticky-tab-active {
|
||||||
|
color: #0066B3;
|
||||||
|
border-bottom: 3px solid #0066B3;
|
||||||
|
}
|
||||||
|
.sidebar-share {
|
||||||
|
position: fixed;
|
||||||
|
right: 24px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: 40;
|
||||||
|
}
|
||||||
|
.text-kintex { color: #0066B3; }
|
||||||
|
.bg-kintex { background-color: #0066B3; }
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-surface font-body-base">
|
||||||
|
|
||||||
|
<!-- 1. Header: TopNavBar -->
|
||||||
|
<nav class="bg-surface-bright dark:bg-inverse-surface full-width top-0 sticky z-50 border-b border-outline-variant dark:border-outline flat no shadows">
|
||||||
|
<div class="max-w-7xl mx-auto flex items-center justify-between px-container-padding h-20">
|
||||||
|
<div class="flex items-center gap-stack-lg">
|
||||||
|
<img src="https://lh3.googleusercontent.com/aida-public/AB6AXuC234fHscU3dFneFMAJkKrPbg4er8z1egYkCTw-K3B4zP2-_A00pd02D0mSldPRgOjM4wvEnh2nHYAchDlkK6V4qaP29YKpKBFYgvy8mECxLg57x6UHvCrOec-6TeyA4y1eIzUTz_oi0_UzXSq3iLA9C9l_jmM5KaYOa2WJq1pMAjbxfqo1dmfMZCDoR7OxhrPqMTUY4MLMgDSq7OAya7dNP9QxigZDMd7H_lXZzziWFdXWVHsyqFEMLAyRFBpRqOHr_DS9-SSJv5U" alt="KINTEX Logo" class="h-10 object-contain">
|
||||||
|
<div class="hidden lg:flex gap-stack-md font-title-sm text-title-sm">
|
||||||
|
<a href="#" class="text-on-surface-variant dark:text-surface-variant hover:text-primary transition-colors">Exhibitions</a>
|
||||||
|
<a href="#" class="text-on-surface-variant dark:text-surface-variant hover:text-primary transition-colors">Conventions</a>
|
||||||
|
<a href="#" class="text-on-surface-variant dark:text-surface-variant hover:text-primary transition-colors">Facilities</a>
|
||||||
|
<a href="#" class="text-on-surface-variant dark:text-surface-variant hover:text-primary transition-colors">Visitor Guide</a>
|
||||||
|
<a href="#" class="text-on-surface-variant dark:text-surface-variant hover:text-primary transition-colors">Customer Center</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<div class="relative hidden md:block">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
||||||
|
<input type="text" placeholder="검색어를 입력하세요" class="pl-10 pr-4 py-2 rounded-full bg-surface-container-low border border-outline-variant focus:outline-none focus:ring-2 focus:ring-primary w-48 transition-all">
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center text-label-md font-label-md gap-2 border border-outline-variant rounded-lg px-3 py-1.5 hover:bg-surface-container-high cursor-pointer transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">language</span>
|
||||||
|
<span>KOR</span>
|
||||||
|
</div>
|
||||||
|
<button class="bg-primary text-on-primary px-6 py-2.5 rounded-lg font-bold hover:bg-primary-container transition-all scale-95 active:scale-90">사전등록하기</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 2. Hero Section -->
|
||||||
|
<header class="relative h-[80vh] min-h-[600px] flex items-center justify-center overflow-hidden">
|
||||||
|
<div class="absolute inset-0 z-0">
|
||||||
|
<div style="background-image: url('placeholder')" data-alt="A futuristic and cinematic digital illustration of a smart factory featuring glowing blue and orange data pathways, industrial robotic arms working in sync, and holographic UI elements floating in the air. The mood is high-tech, innovative, and corporate, with sharp focus and professional lighting that highlights the AI-driven manufacturing theme. The color palette is dominated by deep blues, metallic silvers, and vibrant energy accents." class="w-full h-full bg-cover bg-center scale-105 animate-pulse-slow"></div>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-r from-on-surface/80 to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative z-10 max-w-7xl mx-auto px-container-padding w-full">
|
||||||
|
<div class="max-w-3xl">
|
||||||
|
<div class="inline-flex items-center gap-2 bg-primary/20 backdrop-blur-md border border-primary-fixed/30 text-primary-fixed px-4 py-1.5 rounded-full mb-stack-lg">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-primary-fixed animate-ping"></span>
|
||||||
|
<span class="font-label-md text-label-md uppercase tracking-widest">Global Manufacturing Expo</span>
|
||||||
|
</div>
|
||||||
|
<h1 class="text-white font-display-lg text-[64px] leading-[1.1] font-black mb-stack-md">
|
||||||
|
스마트팩토리 <br>코리아 2026
|
||||||
|
</h1>
|
||||||
|
<p class="text-surface-variant font-headline-md text-headline-md mb-stack-lg border-l-4 border-kintex pl-6">
|
||||||
|
AI 기반 제조 혁신의 미래를 만나보세요
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap gap-stack-md text-white mb-stack-lg">
|
||||||
|
<div class="flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-3 rounded-xl">
|
||||||
|
<span class="material-symbols-outlined">calendar_today</span>
|
||||||
|
<div>
|
||||||
|
<p class="text-label-xs opacity-70">일시</p>
|
||||||
|
<p class="font-bold">2026.09.05 – 09.08</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-3 rounded-xl">
|
||||||
|
<span class="material-symbols-outlined">location_on</span>
|
||||||
|
<div>
|
||||||
|
<p class="text-label-xs opacity-70">장소</p>
|
||||||
|
<p class="font-bold">킨텍스 제2전시장 홀7</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-stack-md">
|
||||||
|
<button class="bg-kintex text-white px-10 py-4 rounded-xl font-bold text-title-sm hover:brightness-110 transition-all shadow-lg hover:shadow-kintex/20">
|
||||||
|
사전등록하기
|
||||||
|
</button>
|
||||||
|
<button class="bg-white/10 backdrop-blur-md border border-white/20 text-white px-10 py-4 rounded-xl font-bold text-title-sm hover:bg-white/20 transition-all">
|
||||||
|
브로슈어 다운로드
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- 3. Sticky Tab Navigation -->
|
||||||
|
<div class="sticky top-20 z-40 glass-nav border-b border-outline-variant">
|
||||||
|
<div class="max-w-7xl mx-auto px-container-padding">
|
||||||
|
<div class="flex items-center gap-10 h-16">
|
||||||
|
<a href="#intro" class="sticky-tab-active h-full flex items-center px-2 font-bold transition-all">소개</a>
|
||||||
|
<a href="#program" class="text-on-surface-variant hover:text-kintex h-full flex items-center px-2 font-semibold transition-all">프로그램</a>
|
||||||
|
<a href="#speakers" class="text-on-surface-variant hover:text-kintex h-full flex items-center px-2 font-semibold transition-all">연사</a>
|
||||||
|
<a href="#exhibitors" class="text-on-surface-variant hover:text-kintex h-full flex items-center px-2 font-semibold transition-all">참가업체</a>
|
||||||
|
<a href="#transport" class="text-on-surface-variant hover:text-kintex h-full flex items-center px-2 font-semibold transition-all">교통</a>
|
||||||
|
<a href="#faq" class="text-on-surface-variant hover:text-kintex h-full flex items-center px-2 font-semibold transition-all">FAQ</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Share Buttons (Sidebar) -->
|
||||||
|
<div class="sidebar-share flex flex-col gap-stack-sm">
|
||||||
|
<button class="w-12 h-12 rounded-full bg-[#FEE500] flex items-center justify-center shadow-md hover:scale-110 transition-transform" title="카카오톡 공유">
|
||||||
|
<span class="material-symbols-outlined text-[#3C1E1E]">chat_bubble</span>
|
||||||
|
</button>
|
||||||
|
<button class="w-12 h-12 rounded-full bg-[#1877F2] flex items-center justify-center shadow-md hover:scale-110 transition-transform" title="페이스북 공유">
|
||||||
|
<span class="material-symbols-outlined text-white">facebook</span>
|
||||||
|
</button>
|
||||||
|
<button class="w-12 h-12 rounded-full bg-white flex items-center justify-center shadow-md border border-outline-variant hover:scale-110 transition-transform" title="링크 복사">
|
||||||
|
<span class="material-symbols-outlined text-on-surface">link</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main class="max-w-7xl mx-auto px-container-padding py-section-padding space-y-section-padding">
|
||||||
|
|
||||||
|
<!-- 4. Rich Content (Intro) -->
|
||||||
|
<section id="intro" class="scroll-mt-40">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-gutter items-center mb-section-padding">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-kintex font-display-lg text-display-lg mb-stack-lg">전시회 개요</h2>
|
||||||
|
<p class="font-body-base text-on-surface-variant leading-relaxed mb-stack-lg">
|
||||||
|
스마트팩토리 코리아 2026은 차세대 제조 기술의 집약체입니다. AI, 로보틱스, IoT, 그리고 디지털 트윈 기술이 결합된 최신 솔루션을 한자리에서 확인하십시오. 전 세계 500개 이상의 선도 기업이 참여하여 제조 공정의 효율성과 지속 가능성을 극대화하는 혁신적인 비전을 공유합니다.
|
||||||
|
</p>
|
||||||
|
<div class="grid grid-cols-2 gap-stack-md">
|
||||||
|
<div class="p-stack-lg rounded-2xl bg-surface-container-lowest border border-outline-variant border-l-4 border-l-kintex shadow-sm hover:shadow-md transition-shadow">
|
||||||
|
<span class="material-symbols-outlined text-kintex text-[32px] mb-2">precision_manufacturing</span>
|
||||||
|
<p class="text-display-lg font-black text-kintex">500+</p>
|
||||||
|
<p class="text-on-surface-variant font-label-md">참가 업체</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-lg rounded-2xl bg-surface-container-lowest border border-outline-variant border-l-4 border-l-secondary shadow-sm hover:shadow-md transition-shadow">
|
||||||
|
<span class="material-symbols-outlined text-secondary text-[32px] mb-2">groups</span>
|
||||||
|
<p class="text-display-lg font-black text-secondary">30,000+</p>
|
||||||
|
<p class="text-on-surface-variant font-label-md">예상 참관객</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="relative rounded-3xl overflow-hidden h-96 group shadow-xl">
|
||||||
|
<div style="background-image: url('placeholder')" data-alt="A wide-angle, professional architectural photograph of a modern, high-ceilinged exhibition hall at KINTEX. The space is filled with bright, natural light from a glass roof, showing numerous sleek technology booths and professional attendees in business attire networking. The atmosphere is professional, spacious, and sophisticated, reflecting a world-class business convention environment." class="w-full h-full bg-cover bg-center transition-transform duration-700 group-hover:scale-110"></div>
|
||||||
|
<div class="absolute bottom-0 left-0 right-0 p-stack-lg bg-gradient-to-t from-on-surface to-transparent text-white">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined">straighten</span>
|
||||||
|
<p class="font-bold">22,000 sqm 규모의 압도적인 전시장</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-stack-lg">
|
||||||
|
<h3 class="text-headline-md font-headline-md text-center mb-stack-lg">주요 전시 테마</h3>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
||||||
|
<div class="bg-surface-container-low p-stack-lg rounded-2xl border border-outline-variant text-center hover:bg-kintex hover:text-white transition-all duration-300">
|
||||||
|
<span class="material-symbols-outlined text-[48px] mb-4">smart_toy</span>
|
||||||
|
<h4 class="font-title-sm mb-2">AI & 자율 로봇</h4>
|
||||||
|
<p class="text-sm opacity-80">스스로 학습하고 판단하는 스마트 로봇 솔루션</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-low p-stack-lg rounded-2xl border border-outline-variant text-center hover:bg-kintex hover:text-white transition-all duration-300">
|
||||||
|
<span class="material-symbols-outlined text-[48px] mb-4">cloud_sync</span>
|
||||||
|
<h4 class="font-title-sm mb-2">디지털 트윈 & IoT</h4>
|
||||||
|
<p class="text-sm opacity-80">가상 세계와 현실 제조 현장의 실시간 동기화</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-low p-stack-lg rounded-2xl border border-outline-variant text-center hover:bg-kintex hover:text-white transition-all duration-300">
|
||||||
|
<span class="material-symbols-outlined text-[48px] mb-4">eco</span>
|
||||||
|
<h4 class="font-title-sm mb-2">탄소중립 스마트 제조</h4>
|
||||||
|
<p class="text-sm opacity-80">에너지 효율 극대화를 위한 친환경 공정 기술</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 5. Session Agenda -->
|
||||||
|
<section id="program" class="scroll-mt-40">
|
||||||
|
<div class="flex items-end justify-between mb-stack-lg">
|
||||||
|
<h2 class="font-display-lg text-display-lg border-b-4 border-kintex pb-2">프로그램 일정</h2>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="px-4 py-2 bg-kintex text-white rounded-lg font-bold">9월 5일 (Day 1)</button>
|
||||||
|
<button class="px-4 py-2 bg-surface-container-high text-on-surface-variant rounded-lg hover:bg-surface-variant">9월 6일 (Day 2)</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-base">
|
||||||
|
<!-- Timeline Item -->
|
||||||
|
<div class="group flex gap-stack-lg p-stack-lg rounded-2xl hover:bg-surface-container-low transition-colors items-start border-l-2 border-outline-variant hover:border-kintex">
|
||||||
|
<div class="w-32 flex-shrink-0 pt-1">
|
||||||
|
<span class="text-kintex font-bold block">10:00 - 11:30</span>
|
||||||
|
<span class="text-xs text-on-surface-variant">메인 컨퍼런스 홀</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow">
|
||||||
|
<div class="inline-block bg-primary-fixed text-on-primary-fixed text-[10px] font-bold px-2 py-0.5 rounded mb-2">KEYNOTE</div>
|
||||||
|
<h4 class="text-title-sm font-title-sm mb-1">제조업의 미래: AI가 이끄는 생산성 혁명</h4>
|
||||||
|
<p class="text-body-sm text-on-surface-variant">AI 글로벌 석학들이 제안하는 2030 제조 전략과 실제 구현 사례 분석</p>
|
||||||
|
</div>
|
||||||
|
<button class="flex items-center gap-1 text-kintex font-bold hover:underline">
|
||||||
|
상세보기 <span class="material-symbols-outlined text-[18px]">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Timeline Item -->
|
||||||
|
<div class="group flex gap-stack-lg p-stack-lg rounded-2xl hover:bg-surface-container-low transition-colors items-start border-l-2 border-outline-variant hover:border-kintex">
|
||||||
|
<div class="w-32 flex-shrink-0 pt-1">
|
||||||
|
<span class="text-kintex font-bold block">13:00 - 14:30</span>
|
||||||
|
<span class="text-xs text-on-surface-variant">세미나실 A</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow">
|
||||||
|
<div class="inline-block bg-secondary-fixed text-on-secondary-fixed text-[10px] font-bold px-2 py-0.5 rounded mb-2">TECH SESSION</div>
|
||||||
|
<h4 class="text-title-sm font-title-sm mb-1">산업용 5G와 엣지 컴퓨팅의 결합</h4>
|
||||||
|
<p class="text-body-sm text-on-surface-variant">지연 없는 데이터 전송을 통한 실시간 공정 제어 기술 시연</p>
|
||||||
|
</div>
|
||||||
|
<button class="flex items-center gap-1 text-kintex font-bold hover:underline">
|
||||||
|
상세보기 <span class="material-symbols-outlined text-[18px]">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Timeline Item -->
|
||||||
|
<div class="group flex gap-stack-lg p-stack-lg rounded-2xl hover:bg-surface-container-low transition-colors items-start border-l-2 border-outline-variant hover:border-kintex">
|
||||||
|
<div class="w-32 flex-shrink-0 pt-1">
|
||||||
|
<span class="text-kintex font-bold block">15:00 - 17:00</span>
|
||||||
|
<span class="text-xs text-on-surface-variant">비즈니스 라운지</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow">
|
||||||
|
<div class="inline-block bg-tertiary-fixed text-on-tertiary-fixed text-[10px] font-bold px-2 py-0.5 rounded mb-2">NETWORKING</div>
|
||||||
|
<h4 class="text-title-sm font-title-sm mb-1">Global Buyers Matching Day</h4>
|
||||||
|
<p class="text-body-sm text-on-surface-variant">해외 유망 기업과 국내 공급사 간의 1:1 비즈니스 미팅</p>
|
||||||
|
</div>
|
||||||
|
<button class="flex items-center gap-1 text-kintex font-bold hover:underline">
|
||||||
|
상세보기 <span class="material-symbols-outlined text-[18px]">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 6. Speaker Cards -->
|
||||||
|
<section id="speakers" class="scroll-mt-40">
|
||||||
|
<h2 class="font-display-lg text-display-lg text-center mb-section-padding">주요 연사</h2>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-gutter">
|
||||||
|
<!-- Speaker Card -->
|
||||||
|
<div class="group">
|
||||||
|
<div class="aspect-[3/4] rounded-2xl overflow-hidden mb-stack-md relative shadow-lg">
|
||||||
|
<img src="placeholder" data-alt="A professional studio portrait of a middle-aged male executive in a sharp navy suit, looking confident and smiling slightly. He has short styled hair and glasses. The background is a clean, neutral gray gradient. The lighting is soft and professional, typical of high-end corporate headshots." class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
||||||
|
<div class="absolute inset-0 bg-kintex/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||||
|
<button class="bg-white text-kintex p-3 rounded-full shadow-lg">
|
||||||
|
<span class="material-symbols-outlined">contact_page</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h5 class="font-title-sm text-title-sm">김철수</h5>
|
||||||
|
<p class="text-on-surface-variant text-body-sm">AI 연구소장 | TechCorp</p>
|
||||||
|
</div>
|
||||||
|
<!-- Speaker Card -->
|
||||||
|
<div class="group">
|
||||||
|
<div class="aspect-[3/4] rounded-2xl overflow-hidden mb-stack-md relative shadow-lg">
|
||||||
|
<img src="placeholder" data-alt="A professional headshot of a female technology leader in her late 30s. She is wearing a modern white blazer over a black top. She has a warm, intelligent expression and is posed against a minimalist, bright architectural background. High-quality corporate photography style with natural skin tones and soft depth of field." class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
||||||
|
<div class="absolute inset-0 bg-kintex/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||||
|
<button class="bg-white text-kintex p-3 rounded-full shadow-lg">
|
||||||
|
<span class="material-symbols-outlined">contact_page</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h5 class="font-title-sm text-title-sm">이영희</h5>
|
||||||
|
<p class="text-on-surface-variant text-body-sm">CTO | Automatech</p>
|
||||||
|
</div>
|
||||||
|
<!-- Speaker Card -->
|
||||||
|
<div class="group">
|
||||||
|
<div class="aspect-[3/4] rounded-2xl overflow-hidden mb-stack-md relative shadow-lg">
|
||||||
|
<img src="placeholder" data-alt="A studio portrait of a senior male professor or researcher with a kind, experienced face. He is wearing a classic charcoal sweater and button-down shirt. The aesthetic is academic yet professional, with soft directional lighting that adds depth to the portrait. High resolution and clear detail." class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
||||||
|
<div class="absolute inset-0 bg-kintex/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||||
|
<button class="bg-white text-kintex p-3 rounded-full shadow-lg">
|
||||||
|
<span class="material-symbols-outlined">contact_page</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h5 class="font-title-sm text-title-sm">박지성</h5>
|
||||||
|
<p class="text-on-surface-variant text-body-sm">로봇공학 석좌교수 | Korea Univ.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Speaker Card -->
|
||||||
|
<div class="group">
|
||||||
|
<div class="aspect-[3/4] rounded-2xl overflow-hidden mb-stack-md relative shadow-lg">
|
||||||
|
<img src="placeholder" data-alt="A professional corporate headshot of a younger female entrepreneur with a vibrant energy. She is wearing a dark teal business casual suit and smiling brightly. The background is a slightly blurred modern office space with clean lines and plants. Sophisticated lighting highlights her features and conveys leadership." class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
||||||
|
<div class="absolute inset-0 bg-kintex/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||||
|
<button class="bg-white text-kintex p-3 rounded-full shadow-lg">
|
||||||
|
<span class="material-symbols-outlined">contact_page</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h5 class="font-title-sm text-title-sm">Sarah Jenkins</h5>
|
||||||
|
<p class="text-on-surface-variant text-body-sm">Global VP | Digitron</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-stack-lg text-center">
|
||||||
|
<button class="text-kintex font-bold hover:underline flex items-center gap-2 mx-auto">
|
||||||
|
전체 연사 리스트 보기 <span class="material-symbols-outlined">arrow_downward</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- 8. Footer -->
|
||||||
|
<footer class="bg-inverse-surface dark:bg-on-surface text-surface-bright border-t-4 border-kintex">
|
||||||
|
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-gutter px-container-padding py-section-padding">
|
||||||
|
<div class="space-y-stack-md">
|
||||||
|
<img src="https://lh3.googleusercontent.com/aida-public/AB6AXuC234fHscU3dFneFMAJkKrPbg4er8z1egYkCTw-K3B4zP2-_A00pd02D0mSldPRgOjM4wvEnh2nHYAchDlkK6V4qaP29YKpKBFYgvy8mECxLg57x6UHvCrOec-6TeyA4y1eIzUTz_oi0_UzXSq3iLA9C9l_jmM5KaYOa2WJq1pMAjbxfqo1dmfMZCDoR7OxhrPqMTUY4MLMgDSq7OAya7dNP9QxigZDMd7H_lXZzziWFdXWVHsyqFEMLAyRFBpRqOHr_DS9-SSJv5U" alt="KINTEX Logo" class="h-10 brightness-0 invert">
|
||||||
|
<p class="font-body-base opacity-70">
|
||||||
|
대한민국 최고의 컨벤션 센터 킨텍스가 <br>미래 제조 산업의 장을 엽니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-stack-md">
|
||||||
|
<h6 class="font-title-sm text-white">Contact Us</h6>
|
||||||
|
<ul class="space-y-2 opacity-70 text-sm">
|
||||||
|
<li>경기도 고양시 일산서구 킨텍스로 217-60</li>
|
||||||
|
<li>Tel: 031-995-8114</li>
|
||||||
|
<li>Email: exhibition@kintex.com</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-stack-md">
|
||||||
|
<h6 class="font-title-sm text-white">Quick Links</h6>
|
||||||
|
<ul class="space-y-2 opacity-70 text-sm">
|
||||||
|
<li><a href="#" class="hover:text-primary-fixed transition-colors">전시회 소개</a></li>
|
||||||
|
<li><a href="#" class="hover:text-primary-fixed transition-colors">부스 참가 안내</a></li>
|
||||||
|
<li><a href="#" class="hover:text-primary-fixed transition-colors">뉴스레터 구독</a></li>
|
||||||
|
<li><a href="#" class="hover:text-primary-fixed transition-colors">오시는 길</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-stack-md">
|
||||||
|
<h6 class="font-title-sm text-white">Follow Us</h6>
|
||||||
|
<div class="flex gap-stack-md">
|
||||||
|
<a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-kintex transition-colors">
|
||||||
|
<span class="material-symbols-outlined">public</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-kintex transition-colors">
|
||||||
|
<span class="material-symbols-outlined">play_circle</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-kintex transition-colors">
|
||||||
|
<span class="material-symbols-outlined">campaign</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-white/10 py-6 text-center text-xs opacity-50 px-container-padding">
|
||||||
|
© 2026 KINTEX. All rights reserved. Powering the future of manufacturing. | <a href="#" class="hover:underline">Privacy Policy</a> | <a href="#" class="hover:underline">Terms of Service</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- FAB for quick registration -->
|
||||||
|
<button class="fixed bottom-8 right-8 bg-kintex text-white px-8 py-4 rounded-full font-bold shadow-2xl hover:scale-105 active:scale-95 transition-all z-50 flex items-center gap-2 group">
|
||||||
|
<span class="material-symbols-outlined group-hover:animate-bounce">app_registration</span>
|
||||||
|
사전등록 바로가기
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Simple Intersection Observer for scroll tracking on tabs
|
||||||
|
const sections = document.querySelectorAll('section');
|
||||||
|
const navLinks = document.querySelectorAll('.glass-nav a');
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
let current = '';
|
||||||
|
sections.forEach(section => {
|
||||||
|
const sectionTop = section.offsetTop;
|
||||||
|
const sectionHeight = section.clientHeight;
|
||||||
|
if (pageYOffset >= (sectionTop - 150)) {
|
||||||
|
current = section.getAttribute('id');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
navLinks.forEach(link => {
|
||||||
|
link.classList.remove('sticky-tab-active');
|
||||||
|
link.classList.add('text-on-surface-variant');
|
||||||
|
if (link.getAttribute('href').includes(current)) {
|
||||||
|
link.classList.add('sticky-tab-active');
|
||||||
|
link.classList.remove('text-on-surface-variant');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Smooth scroll
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html></style></head><body></body></html>
|
||||||
428
stitch_kintex_ai_system_architect/scr_p3/code.html
Normal file
428
stitch_kintex_ai_system_architect/scr_p3/code.html
Normal file
@ -0,0 +1,428 @@
|
|||||||
|
<!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 - Interactive Floor Plan</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;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"/>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"outline": "#727781",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"surface-bright": "#faf8ff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"primary": "#003765",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"on-secondary": "#ffffff"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"section-padding": "96px",
|
||||||
|
"base": "4px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"headline-md": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"display-lg-mobile": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.floor-plan-grid {
|
||||||
|
background-image: radial-gradient(#c1c7d3 1px, transparent 1px);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
}
|
||||||
|
.booth-rect {
|
||||||
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
.booth-rect:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
filter: brightness(1.1);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface font-body-base text-on-surface">
|
||||||
|
<!-- TopNavBar -->
|
||||||
|
<nav class="bg-surface/80 backdrop-blur-md text-primary font-title-sm text-title-sm docked full-width top-0 sticky border-b border-outline-variant shadow-sm z-50 h-20 flex items-center">
|
||||||
|
<div class="flex justify-between items-center w-full px-container-padding max-w-7xl mx-auto h-full">
|
||||||
|
<div class="flex items-center gap-stack-lg">
|
||||||
|
<img alt="KINTEX Logo" class="h-10" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC3-AXiHz8U0mlrCuAdZkxnW6WzX6EmmAjQsdJ-Qsk0VpGmX6QlQUtdgxIg_HN4Sp2FWR2KHC-gCfC-vFGWSUpi_yfG6qbQh2gvrzy4_XOzZiDLkVOTjFuSsNyHlKqnW4_QFTdbOJWYHU9j9G8UTpk6glTZgsbPfGbn19zIFT24xAdhEpK-WvgidWKQYfVm_HCjVg3d7fshoYwYwQlhn8I9Zy0bzQ59HwJv6Bm7YOosMvQe-M0h_NlFnHzsfV5wGmfMabGOh4vkziA"/>
|
||||||
|
<div class="hidden md:flex gap-gutter">
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors" href="#">Exhibitions</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors" href="#">Facilities</a>
|
||||||
|
<a class="text-primary border-b-2 border-primary font-bold pb-1" href="#">Visitor Guide</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors" href="#">Schedule</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<div class="flex gap-4 items-center mr-4">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full cursor-pointer transition-all">language</span>
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full cursor-pointer transition-all">search</span>
|
||||||
|
</div>
|
||||||
|
<button class="bg-primary text-on-primary px-6 py-2 rounded-lg font-label-md text-label-md active:scale-95 duration-150 ease-in-out">Tickets</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main class="max-w-[1440px] mx-auto flex h-[calc(100vh-80px)] overflow-hidden">
|
||||||
|
<!-- Left Sidebar: Search/Filter Panel -->
|
||||||
|
<aside class="w-80 border-r border-outline-variant bg-surface-container-lowest flex flex-col h-full z-20">
|
||||||
|
<div class="p-stack-lg border-b border-outline-variant">
|
||||||
|
<h2 class="font-headline-md text-headline-md mb-stack-md">업종 · 존 · 키워드</h2>
|
||||||
|
<!-- Search Input -->
|
||||||
|
<div class="relative mb-stack-lg">
|
||||||
|
<input class="w-full pl-10 pr-4 py-3 bg-surface-container-low border border-outline-variant rounded-full font-body-sm text-body-sm focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all" placeholder="참가업체 또는 부스번호 검색" type="text"/>
|
||||||
|
<img alt="Search" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 opacity-50" src="https://lh3.googleusercontent.com/aida/AP1WRLvR8KDDPFgH9vKk_aFJ_lA5WCSRmrDnPhJH5rSjuWilOAI5PMDe5z2hRnRLQhSn7_712ig52lC61Bb_R8bUkkbqNGZPv3dvykD_Oky9hXWygGnc1ybvaI9TcbT1Yw4Bd2JySNFbit4ho4113ql2BsDvpvJ2ZN64zJqv5GowDs0mdnDyFTwPWmGEKEPr3MigJ4LAaeegtd0fEG_pZWtGpsGSNPVdj4r_TbmkKSxdvmZG_kh-ujSkrXGZzkQ"/>
|
||||||
|
</div>
|
||||||
|
<!-- Categories -->
|
||||||
|
<div class="space-y-stack-sm mb-stack-lg">
|
||||||
|
<p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider mb-2">분야별 필터</p>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<span class="bg-primary-fixed text-on-primary-fixed px-3 py-1.5 rounded-full text-label-xs font-label-md cursor-pointer hover:bg-primary hover:text-on-primary transition-colors">AI 솔루션</span>
|
||||||
|
<span class="bg-surface-container-high text-on-surface-variant px-3 py-1.5 rounded-full text-label-xs font-label-md cursor-pointer hover:bg-primary-fixed transition-colors">로보틱스</span>
|
||||||
|
<span class="bg-surface-container-high text-on-surface-variant px-3 py-1.5 rounded-full text-label-xs font-label-md cursor-pointer hover:bg-primary-fixed transition-colors">IoT</span>
|
||||||
|
<span class="bg-surface-container-high text-on-surface-variant px-3 py-1.5 rounded-full text-label-xs font-label-md cursor-pointer hover:bg-primary-fixed transition-colors">빅데이터</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Hall Selection -->
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider mb-2">전시장 선택</p>
|
||||||
|
<select class="w-full p-2.5 bg-surface-container-low border border-outline-variant rounded-lg font-body-sm text-body-sm">
|
||||||
|
<option>제 1 전시장 - Hall 1-A</option>
|
||||||
|
<option>제 1 전시장 - Hall 1-B</option>
|
||||||
|
<option>제 2 전시장 - Hall 6</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Results List -->
|
||||||
|
<div class="flex-1 overflow-y-auto p-stack-md space-y-3">
|
||||||
|
<p class="font-label-xs text-on-surface-variant/70 mb-2">검색 결과 (42)</p>
|
||||||
|
<div class="p-stack-md bg-surface-container-lowest border-l-4 border-primary rounded-r-lg shadow-sm hover:shadow-md transition-all cursor-pointer group">
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-primary text-label-md mb-0.5">A-102</p>
|
||||||
|
<h3 class="font-title-sm text-on-surface group-hover:text-primary transition-colors">(주)테크솔루션</h3>
|
||||||
|
<p class="font-body-sm text-on-surface-variant">AI 최적화 솔루션</p>
|
||||||
|
</div>
|
||||||
|
<span class="material-symbols-outlined text-outline group-hover:text-primary">chevron_right</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-md bg-surface-container-lowest border-l-4 border-secondary rounded-r-lg shadow-sm hover:shadow-md transition-all cursor-pointer group">
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-secondary text-label-md mb-0.5">C-110</p>
|
||||||
|
<h3 class="font-title-sm text-on-surface group-hover:text-secondary transition-colors">미래로보틱스</h3>
|
||||||
|
<p class="font-body-sm text-on-surface-variant">자율 주행 물류 로봇</p>
|
||||||
|
</div>
|
||||||
|
<span class="material-symbols-outlined text-outline group-hover:text-secondary">chevron_right</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-md bg-surface-container-lowest border-l-4 border-tertiary-container rounded-r-lg shadow-sm hover:shadow-md transition-all cursor-pointer group">
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-tertiary-container text-label-md mb-0.5">B-205</p>
|
||||||
|
<h3 class="font-title-sm text-on-surface group-hover:text-tertiary-container transition-colors">데이터랩스</h3>
|
||||||
|
<p class="font-body-sm text-on-surface-variant">빅데이터 시각화 서비스</p>
|
||||||
|
</div>
|
||||||
|
<span class="material-symbols-outlined text-outline group-hover:text-tertiary-container">chevron_right</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-md bg-surface-container-lowest border-l-4 border-outline rounded-r-lg opacity-60">
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-outline text-label-md mb-0.5">D-101</p>
|
||||||
|
<h3 class="font-title-sm text-on-surface">글로벌 커넥트</h3>
|
||||||
|
<p class="font-body-sm text-on-surface-variant">준비 중</p>
|
||||||
|
</div>
|
||||||
|
<span class="text-label-xs font-label-md bg-surface-container-high px-2 py-0.5 rounded">준비중</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Main Content: Interactive Map -->
|
||||||
|
<section class="flex-1 relative bg-surface-bright overflow-hidden">
|
||||||
|
<div class="absolute inset-0 floor-plan-grid opacity-30"></div>
|
||||||
|
<!-- Map Stage -->
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center p-20 cursor-grab active:cursor-grabbing" id="map-stage">
|
||||||
|
<div class="relative w-[900px] h-[600px] bg-white border border-outline-variant shadow-xl p-8 transition-transform duration-300" id="map-container">
|
||||||
|
<h4 class="absolute top-4 left-6 font-label-md text-on-surface-variant/40">Hall 1-A Entrance</h4>
|
||||||
|
<div class="grid grid-cols-6 grid-rows-4 gap-4 w-full h-full p-4">
|
||||||
|
<!-- Booth A Area -->
|
||||||
|
<div class="booth-rect bg-primary/10 border-2 border-primary/40 rounded-lg flex items-center justify-center relative overflow-hidden" onclick="showPopover(event, 'A-102', '(주)테크솔루션', 'AI 최적화')">
|
||||||
|
<span class="font-label-md text-primary">A-102</span>
|
||||||
|
<div class="absolute bottom-0 left-0 w-full h-1 bg-primary"></div>
|
||||||
|
</div>
|
||||||
|
<div class="booth-rect bg-primary/10 border-2 border-primary/40 rounded-lg flex items-center justify-center relative overflow-hidden">
|
||||||
|
<span class="font-label-md text-primary">A-103</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2 row-span-1 bg-surface-container-high border-2 border-outline-variant/30 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-label-md text-on-surface-variant">공용부 (Rest Area)</span>
|
||||||
|
</div>
|
||||||
|
<div class="booth-rect bg-primary/10 border-2 border-primary/40 rounded-lg flex items-center justify-center relative overflow-hidden">
|
||||||
|
<span class="font-label-md text-primary">A-104</span>
|
||||||
|
</div>
|
||||||
|
<div class="booth-rect bg-secondary/10 border-2 border-secondary/40 rounded-lg flex items-center justify-center relative overflow-hidden">
|
||||||
|
<span class="font-label-md text-secondary">C-110</span>
|
||||||
|
</div>
|
||||||
|
<!-- Row 2 -->
|
||||||
|
<div class="booth-rect bg-primary/10 border-2 border-primary/40 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-label-md text-primary">A-105</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-3 bg-tertiary-fixed border-2 border-tertiary/20 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-label-md text-tertiary">Main Stage Area</span>
|
||||||
|
</div>
|
||||||
|
<div class="booth-rect bg-primary/10 border-2 border-primary/40 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-label-md text-primary">A-106</span>
|
||||||
|
</div>
|
||||||
|
<div class="booth-rect bg-secondary/10 border-2 border-secondary/40 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-label-md text-secondary">C-111</span>
|
||||||
|
</div>
|
||||||
|
<!-- Row 3: Reserved / Others -->
|
||||||
|
<div class="booth-rect bg-error-container/20 border-2 border-error/20 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-label-md text-error">B-201</span>
|
||||||
|
<span class="absolute top-1 right-1 text-[8px] bg-error text-white px-1 rounded">R</span>
|
||||||
|
</div>
|
||||||
|
<div class="booth-rect bg-error-container/20 border-2 border-error/20 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-label-md text-error">B-202</span>
|
||||||
|
</div>
|
||||||
|
<div class="booth-rect bg-primary/10 border-2 border-primary/40 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-label-md text-primary">B-205</span>
|
||||||
|
</div>
|
||||||
|
<div class="booth-rect bg-primary/10 border-2 border-primary/40 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-label-md text-primary">B-206</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2 bg-surface-container border-2 border-outline-variant/30 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-label-md text-on-surface-variant">Infomation Desk</span>
|
||||||
|
</div>
|
||||||
|
<!-- Row 4 -->
|
||||||
|
<div class="col-span-4 bg-surface-container-high border-2 border-outline-variant/30 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-label-md text-on-surface-variant">Entrance Hallway</span>
|
||||||
|
</div>
|
||||||
|
<div class="booth-rect bg-secondary/10 border-2 border-secondary/40 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-label-md text-secondary">C-120</span>
|
||||||
|
</div>
|
||||||
|
<div class="booth-rect bg-secondary/10 border-2 border-secondary/40 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-label-md text-secondary">C-121</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Modern Popover Tooltip (Hidden by default) -->
|
||||||
|
<div class="hidden absolute z-30 glass-panel border border-outline-variant rounded-xl shadow-xl w-64 overflow-hidden animate-in fade-in zoom-in duration-200" id="booth-popover">
|
||||||
|
<div class="p-4 border-b border-outline-variant/30">
|
||||||
|
<div class="flex justify-between items-center mb-2">
|
||||||
|
<span class="text-label-xs font-label-md px-2 py-0.5 bg-primary-fixed text-on-primary-fixed rounded" id="popover-id">A-102</span>
|
||||||
|
<button class="text-outline hover:text-on-surface" onclick="hidePopover()"><span class="material-symbols-outlined text-[18px]">close</span></button>
|
||||||
|
</div>
|
||||||
|
<h5 class="font-headline-md text-headline-md text-on-surface leading-tight mb-1" id="popover-name">(주)테크솔루션</h5>
|
||||||
|
<p class="font-body-sm text-on-surface-variant" id="popover-category">Category: AI 최적화</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 bg-surface-container-low flex justify-between items-center">
|
||||||
|
<a class="text-primary font-label-md text-label-md hover:underline flex items-center" href="#">
|
||||||
|
부스 상세 <span class="material-symbols-outlined text-[16px] ml-1">arrow_forward</span>
|
||||||
|
</a>
|
||||||
|
<button class="bg-primary-container text-on-primary-container px-3 py-1 rounded-md text-label-xs font-label-md">길찾기</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Map Controls -->
|
||||||
|
<div class="absolute bottom-10 right-10 flex flex-col gap-2">
|
||||||
|
<div class="flex flex-col bg-white border border-outline-variant rounded-lg shadow-lg overflow-hidden">
|
||||||
|
<button class="p-3 hover:bg-surface-container-low border-b border-outline-variant transition-colors" onclick="zoomMap(1.1)"><span class="material-symbols-outlined">add</span></button>
|
||||||
|
<button class="p-3 hover:bg-surface-container-low border-b border-outline-variant transition-colors" onclick="zoomMap(0.9)"><span class="material-symbols-outlined">remove</span></button>
|
||||||
|
<button class="p-3 hover:bg-surface-container-low transition-colors" onclick="resetMap()"><span class="material-symbols-outlined">restart_alt</span></button>
|
||||||
|
</div>
|
||||||
|
<button class="p-3 bg-primary text-on-primary rounded-lg shadow-lg hover:bg-primary-container transition-all active:scale-95">
|
||||||
|
<span class="material-symbols-outlined">my_location</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Legend Overlay -->
|
||||||
|
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 glass-panel border border-outline-variant rounded-full px-6 py-3 flex items-center gap-6 shadow-sm">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-primary/40 border border-primary"></div>
|
||||||
|
<span class="text-label-xs font-label-md text-on-surface-variant">판매 (Available)</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-error-container/40 border border-error"></div>
|
||||||
|
<span class="text-label-xs font-label-md text-on-surface-variant">예약 (Reserved)</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-surface-container-high border border-outline-variant"></div>
|
||||||
|
<span class="text-label-xs font-label-md text-on-surface-variant">공용부 (Public)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-on-surface text-surface font-body-sm text-body-sm full-width border-t border-white/10">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-stack-lg w-full px-container-padding py-section-padding max-w-7xl mx-auto">
|
||||||
|
<div class="col-span-1 md:col-span-2">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-surface mb-stack-md">KINTEX</h3>
|
||||||
|
<p class="text-surface-variant max-w-sm mb-stack-lg">Korea International Exhibition Center is the leader of the exhibition industry in Korea, providing world-class infrastructure and services.</p>
|
||||||
|
<p class="text-surface-variant opacity-60">© 2024 KINTEX. All Rights Reserved. Korea International Exhibition Center.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-label-md text-label-md text-primary-fixed mb-4 uppercase tracking-widest">Navigations</h4>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a class="text-surface-variant hover:text-primary-fixed transition-colors" href="#">Exhibitor Center</a></li>
|
||||||
|
<li><a class="text-surface-variant hover:text-primary-fixed transition-colors" href="#">Venue Rental</a></li>
|
||||||
|
<li><a class="text-surface-variant hover:text-primary-fixed transition-colors" href="#">Business Support</a></li>
|
||||||
|
<li><a class="text-surface-variant hover:text-primary-fixed transition-colors" href="#">Sitemap</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-label-md text-label-md text-primary-fixed mb-4 uppercase tracking-widest">Support</h4>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a class="text-surface-variant hover:text-primary-fixed transition-colors underline" href="#">Privacy Policy</a></li>
|
||||||
|
<li><a class="text-surface-variant hover:text-primary-fixed transition-colors" href="#">Terms of Service</a></li>
|
||||||
|
<li><a class="text-surface-variant hover:text-primary-fixed transition-colors" href="#">Sustainability</a></li>
|
||||||
|
<li><a class="text-surface-variant hover:text-primary-fixed transition-colors" href="#">Contact Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
const mapContainer = document.getElementById('map-container');
|
||||||
|
const popover = document.getElementById('booth-popover');
|
||||||
|
let currentScale = 1;
|
||||||
|
|
||||||
|
function zoomMap(factor) {
|
||||||
|
currentScale *= factor;
|
||||||
|
currentScale = Math.min(Math.max(0.5, currentScale), 3);
|
||||||
|
mapContainer.style.transform = `scale(${currentScale})`;
|
||||||
|
hidePopover();
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetMap() {
|
||||||
|
currentScale = 1;
|
||||||
|
mapContainer.style.transform = `scale(1)`;
|
||||||
|
hidePopover();
|
||||||
|
}
|
||||||
|
|
||||||
|
function showPopover(event, id, name, category) {
|
||||||
|
event.stopPropagation();
|
||||||
|
const rect = event.currentTarget.getBoundingClientRect();
|
||||||
|
|
||||||
|
document.getElementById('popover-id').innerText = id;
|
||||||
|
document.getElementById('popover-name').innerText = name;
|
||||||
|
document.getElementById('popover-category').innerText = `Category: ${category}`;
|
||||||
|
|
||||||
|
popover.classList.remove('hidden');
|
||||||
|
|
||||||
|
// Positioning popover relative to the viewport but accounting for container relative
|
||||||
|
const section = event.currentTarget.closest('section').getBoundingClientRect();
|
||||||
|
popover.style.left = `${rect.left - section.left + rect.width / 2 - 128}px`;
|
||||||
|
popover.style.top = `${rect.top - section.top - 140}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hidePopover() {
|
||||||
|
popover.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close popover when clicking elsewhere
|
||||||
|
document.querySelector('main').addEventListener('click', () => {
|
||||||
|
hidePopover();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Simple drag simulation for the map
|
||||||
|
let isDragging = false;
|
||||||
|
let startX, startY, scrollLeft, scrollTop;
|
||||||
|
const stage = document.getElementById('map-stage');
|
||||||
|
|
||||||
|
stage.addEventListener('mousedown', (e) => {
|
||||||
|
isDragging = true;
|
||||||
|
startX = e.pageX - stage.offsetLeft;
|
||||||
|
startY = e.pageY - stage.offsetTop;
|
||||||
|
});
|
||||||
|
|
||||||
|
stage.addEventListener('mouseleave', () => isDragging = false);
|
||||||
|
stage.addEventListener('mouseup', () => isDragging = false);
|
||||||
|
|
||||||
|
stage.addEventListener('mousemove', (e) => {
|
||||||
|
if (!isDragging) return;
|
||||||
|
e.preventDefault();
|
||||||
|
// Just visual hint as full drag needs more complex container logic
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
417
stitch_kintex_ai_system_architect/scr_p4/code.html
Normal file
417
stitch_kintex_ai_system_architect/scr_p4/code.html
Normal file
@ -0,0 +1,417 @@
|
|||||||
|
<!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>
|
||||||
292
stitch_kintex_ai_system_architect/scr_p4/code_done.html
Normal file
292
stitch_kintex_ai_system_architect/scr_p4/code_done.html
Normal file
@ -0,0 +1,292 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>사전등록 완료 - KINTEX Registration</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@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"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.glass-card {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
@keyframes subtle-float {
|
||||||
|
0% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-10px); }
|
||||||
|
100% { transform: translateY(0px); }
|
||||||
|
}
|
||||||
|
.animate-float {
|
||||||
|
animation: subtle-float 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface text-on-surface font-body-base antialiased">
|
||||||
|
<!-- TopNavBar -->
|
||||||
|
<header class="bg-surface-container-lowest border-b border-outline-variant shadow-sm fixed top-0 w-full 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" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCR6dSJzvC2KV8NF52ZH7dw5EY_Lz78Morv0lhcecU3ELpN79XUMqO7_4UShtICuz8CDi0ZVBbMAtWAdj2LuOM2OURR1NiBRU8AzxXGVnvi4VvWkwLCbHMvQOcWb6d40QmyDRqgCPOG1zNK55NcPpLx2iv67s1SCcV5rfBeJy2iHUuZfz2BwAPKA4Zu4ByYJ0AYFJWdWFkRvQFYIML0rNjRr6PC85H5BK__4TFrl2fwpSSx-XGGywk8I8CrH-3Nlk2J7vL_vqHVm24"/>
|
||||||
|
</div>
|
||||||
|
<nav class="hidden md:flex gap-8">
|
||||||
|
<a class="font-body-base text-body-base text-on-surface-variant font-medium hover:text-primary transition-colors duration-200" href="#">Exhibitions</a>
|
||||||
|
<a class="font-body-base text-body-base text-on-surface-variant font-medium hover:text-primary transition-colors duration-200" href="#">Venue Info</a>
|
||||||
|
<a class="font-body-base text-body-base text-on-surface-variant font-medium hover:text-primary transition-colors duration-200" href="#">Support</a>
|
||||||
|
</nav>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<button class="bg-primary text-on-primary px-6 py-2 rounded-lg font-bold hover:opacity-80 transition-all">Check Status</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="pt-24 pb-section-padding px-container-padding">
|
||||||
|
<div class="max-w-[1280px] mx-auto flex flex-col items-center text-center">
|
||||||
|
<!-- Success Animation / Visual Confirmation -->
|
||||||
|
<div class="mb-stack-lg">
|
||||||
|
<div class="w-20 h-20 bg-primary-container rounded-full flex items-center justify-center text-on-primary-container mb-4 mx-auto shadow-sm">
|
||||||
|
<span class="material-symbols-outlined text-4xl" style="font-variation-settings: 'wght' 700;">check_circle</span>
|
||||||
|
</div>
|
||||||
|
<h1 class="font-display-lg text-display-lg text-primary mb-stack-sm md:text-display-lg sm:text-display-lg-mobile">
|
||||||
|
사전등록이 완료되었습니다!
|
||||||
|
</h1>
|
||||||
|
<p class="font-body-base text-body-base text-on-surface-variant max-w-lg mx-auto">
|
||||||
|
모바일 배지가 발급되었습니다. 전시회 당일 입구에서 QR 코드를 제시해 주세요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- Bento Badge Layout -->
|
||||||
|
<div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-12 gap-stack-md mt-stack-lg">
|
||||||
|
<!-- Left Column: Event Summary -->
|
||||||
|
<div class="md:col-span-4 flex flex-col gap-stack-md">
|
||||||
|
<div class="bg-surface-container-lowest p-stack-lg rounded-xl border border-outline-variant text-left shadow-sm h-full flex flex-col justify-center">
|
||||||
|
<div class="flex items-center gap-2 mb-2 text-primary">
|
||||||
|
<span class="material-symbols-outlined">calendar_today</span>
|
||||||
|
<span class="font-label-md text-label-md">일시</span>
|
||||||
|
</div>
|
||||||
|
<p class="font-title-sm text-title-sm mb-stack-md">2024년 11월 12일(화) - 15일(금)</p>
|
||||||
|
<div class="flex items-center gap-2 mb-2 text-primary">
|
||||||
|
<span class="material-symbols-outlined">location_on</span>
|
||||||
|
<span class="font-label-md text-label-md">장소</span>
|
||||||
|
</div>
|
||||||
|
<p class="font-title-sm text-title-sm">KINTEX 제1전시장 3, 4홀</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Center Column: Mobile Badge (High Fidelity) -->
|
||||||
|
<div class="md:col-span-4 flex justify-center">
|
||||||
|
<div class="relative w-full max-w-[320px] aspect-[9/16] bg-primary rounded-[40px] p-6 shadow-xl overflow-hidden animate-float">
|
||||||
|
<!-- Card Decorative background -->
|
||||||
|
<div class="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
|
||||||
|
<div class="absolute -top-10 -right-10 w-40 h-40 bg-white rounded-full blur-3xl"></div>
|
||||||
|
<div class="absolute -bottom-10 -left-10 w-40 h-40 bg-white rounded-full blur-3xl"></div>
|
||||||
|
</div>
|
||||||
|
<div class="relative z-10 flex flex-col h-full items-center justify-between">
|
||||||
|
<div class="w-full flex justify-between items-start">
|
||||||
|
<span class="bg-white/20 backdrop-blur-md text-white px-3 py-1 rounded-full text-label-md font-bold uppercase tracking-wider">Pass</span>
|
||||||
|
<div class="text-white opacity-80">
|
||||||
|
<span class="material-symbols-outlined">contactless</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full mt-stack-md">
|
||||||
|
<h3 class="text-white/60 font-label-md text-label-md mb-1">VISITOR</h3>
|
||||||
|
<div class="flex items-baseline gap-2">
|
||||||
|
<h2 class="text-white font-headline-md text-headline-md font-bold">홍길동</h2>
|
||||||
|
<span class="text-white/80 font-body-sm text-body-sm">Mr. Hong</span>
|
||||||
|
</div>
|
||||||
|
<div class="mt-stack-sm">
|
||||||
|
<span class="bg-tertiary-fixed text-on-tertiary-fixed px-2 py-0.5 rounded text-label-md font-bold">바이어</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- QR Code Area -->
|
||||||
|
<div class="w-full bg-white rounded-2xl p-4 flex flex-col items-center gap-4 shadow-inner">
|
||||||
|
<div class="w-full aspect-square bg-white flex items-center justify-center border-4 border-surface-container">
|
||||||
|
<img class="w-full h-full object-contain" data-alt="A clean, high-contrast, professional QR code centered on a pure white background with sharp black pixels and no background artifacts. Minimalist corporate aesthetic, representing digital ticket technology." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBEj_94--lUOTh3S_pX-7UrPqkc94oZcLgqPEyGy5DcfFtGfREJqjawk8sRYXywpE9MIf3PmswuCc3NKP3ilGT-kHO0B4TcrOZR4_y9TlD9zsZuxtr082dGPpW2PaBhS9YdYnlEi10y6ExOtUj5qm3P4sPwISSigguxQBga8opoAeMyS1UXFPopX33FqEm18NJv2cQPtNBKmYj_McUnHxx2cvjPkC2qVWgbdFJMPSyF7X5tzzEkENRAmq40pUBK9jKIcQPPG4Iar5k"/>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="font-label-md text-label-md text-on-surface-variant mb-1">Registration ID</p>
|
||||||
|
<p class="font-body-base text-body-base font-bold text-primary">KTX-2024-8921-00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full pt-4 border-t border-white/20">
|
||||||
|
<div class="flex justify-between items-center text-white/80 font-label-md text-label-md">
|
||||||
|
<span>Issued at KINTEX</span>
|
||||||
|
<span>2024.10.24</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Right Column: Status & Assistance -->
|
||||||
|
<div class="md:col-span-4 flex flex-col gap-stack-md">
|
||||||
|
<div class="bg-surface-container-low p-stack-lg rounded-xl border border-outline-variant text-left shadow-sm h-full flex flex-col justify-center">
|
||||||
|
<div class="flex items-center gap-3 mb-stack-md">
|
||||||
|
<div class="p-2 bg-error-container text-on-error-container rounded-lg">
|
||||||
|
<span class="material-symbols-outlined">notifications_active</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-label-md text-on-surface-variant">입장 알림</p>
|
||||||
|
<p class="font-body-base text-body-base font-bold">D-19</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-stack-sm">
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed">
|
||||||
|
• 입구 전용 키오스크에서 본 QR을 인식하여 실물 배지를 출력하실 수 있습니다.
|
||||||
|
</p>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed">
|
||||||
|
• 등록 확인 이메일이 발송되었습니다. (hong@example.com)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- CTA Buttons -->
|
||||||
|
<div class="mt-section-padding flex flex-col sm:flex-row gap-stack-md">
|
||||||
|
<button class="bg-primary text-on-primary px-12 py-4 rounded-full font-bold text-title-sm hover:bg-primary-container transition-all flex items-center justify-center gap-2 shadow-md">
|
||||||
|
<span class="material-symbols-outlined">confirmation_number</span>
|
||||||
|
내 티켓 확인하기
|
||||||
|
</button>
|
||||||
|
<button class="bg-surface-container-highest text-on-surface px-12 py-4 rounded-full font-bold text-title-sm hover:bg-surface-container-high transition-all flex items-center justify-center gap-2 border border-outline-variant">
|
||||||
|
<span class="material-symbols-outlined">home</span>
|
||||||
|
홈으로 이동
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Social Share / Help -->
|
||||||
|
<div class="mt-stack-lg py-stack-md flex items-center gap-gutter text-on-surface-variant">
|
||||||
|
<button class="flex items-center gap-2 hover:text-primary transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-sm">share</span>
|
||||||
|
<span class="text-label-md">공유하기</span>
|
||||||
|
</button>
|
||||||
|
<div class="w-px h-4 bg-outline-variant"></div>
|
||||||
|
<button class="flex items-center gap-2 hover:text-primary transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-sm">help_outline</span>
|
||||||
|
<span class="text-label-md">도움말</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-surface-container-high 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 flex-col items-center md:items-start gap-1">
|
||||||
|
<div class="font-title-sm text-title-sm font-bold text-on-surface">KINTEX Registration</div>
|
||||||
|
<div class="font-body-sm text-body-sm text-on-surface-variant">© 2024 KINTEX. All rights reserved.</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-stack-md">
|
||||||
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary underline" href="#">Privacy Policy</a>
|
||||||
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary underline" href="#">Terms of Service</a>
|
||||||
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary underline" href="#">Contact Us</a>
|
||||||
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary underline" href="#">Exhibition Schedule</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
// Micro-interaction for the badge
|
||||||
|
const badge = document.querySelector('.animate-float');
|
||||||
|
document.addEventListener('mousemove', (e) => {
|
||||||
|
const xAxis = (window.innerWidth / 2 - e.pageX) / 45;
|
||||||
|
const yAxis = (window.innerHeight / 2 - e.pageY) / 45;
|
||||||
|
badge.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg) translateY(-5px)`;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mouseleave', () => {
|
||||||
|
badge.style.transform = `rotateY(0deg) rotateX(0deg) translateY(0px)`;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
277
stitch_kintex_ai_system_architect/scr_p4/code_step1_type.html
Normal file
277
stitch_kintex_ai_system_architect/scr_p4/code_step1_type.html
Normal file
@ -0,0 +1,277 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>KINTEX Visitor Pre-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;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"/>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"primary": "#003765",
|
||||||
|
"outline": "#727781",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"inverse-primary": "#a2c9ff"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"container-padding": "24px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"section-padding": "96px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"display-lg-mobile": ["Inter"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"headline-md": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
.type-card-selected {
|
||||||
|
border-color: #003765 !important;
|
||||||
|
background-color: #f2f3ff !important;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 55, 101, 0.1);
|
||||||
|
}
|
||||||
|
.type-card-selected .check-circle {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-surface font-body-base antialiased">
|
||||||
|
<!-- Top Navigation Bar -->
|
||||||
|
<header class="w-full top-0 bg-surface-bright border-b border-outline-variant z-50 sticky">
|
||||||
|
<nav class="flex justify-between items-center w-full px-container-padding h-16 max-w-[1280px] mx-auto">
|
||||||
|
<div class="font-headline-md text-headline-md font-bold text-primary">KINTEX</div>
|
||||||
|
<div class="hidden md:flex gap-8 items-center">
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors" href="#">Exhibitions</a>
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors" href="#">Facilities</a>
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors" href="#">Services</a>
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors" href="#">About</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button class="font-label-md text-label-md text-primary hover:underline transition-all active:opacity-80">Login</button>
|
||||||
|
<button class="bg-primary text-on-primary px-6 py-2 rounded-full font-label-md text-label-md hover:bg-primary-container transition-all active:opacity-80">Register</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main class="min-h-[calc(100vh-64px)] flex flex-col items-center py-section-padding px-container-padding">
|
||||||
|
<!-- Registration Container -->
|
||||||
|
<div class="w-full max-w-[800px] bg-surface-container-lowest rounded-xl border border-outline-variant p-8 md:p-12 shadow-sm">
|
||||||
|
<!-- Headline -->
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<h1 class="font-display-lg text-display-lg text-primary mb-4">참관객 사전등록</h1>
|
||||||
|
<p class="font-body-base text-body-base text-on-surface-variant">KINTEX 전시회 방문을 위한 사전등록 단계입니다.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Progress Indicator -->
|
||||||
|
<div class="flex items-center justify-between w-full max-w-[500px] mx-auto mb-16 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-[10%] h-[2px] bg-primary -translate-y-1/2 z-0 transition-all duration-500"></div>
|
||||||
|
<!-- Step 1 (Active) -->
|
||||||
|
<div class="relative z-10 flex flex-col items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-primary text-on-primary flex items-center justify-center font-label-md text-label-md shadow-md">1</div>
|
||||||
|
<span class="font-label-md text-label-md text-primary font-bold">유형</span>
|
||||||
|
</div>
|
||||||
|
<!-- Step 2 -->
|
||||||
|
<div class="relative z-10 flex flex-col items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center font-label-md text-label-md border border-outline-variant">2</div>
|
||||||
|
<span class="font-label-md text-label-md text-on-surface-variant">정보</span>
|
||||||
|
</div>
|
||||||
|
<!-- Step 3 -->
|
||||||
|
<div class="relative z-10 flex flex-col items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center font-label-md text-label-md border border-outline-variant">3</div>
|
||||||
|
<span class="font-label-md text-label-md text-on-surface-variant">관심분야</span>
|
||||||
|
</div>
|
||||||
|
<!-- Step 4 -->
|
||||||
|
<div class="relative z-10 flex flex-col items-center gap-2">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center font-label-md text-label-md border border-outline-variant">4</div>
|
||||||
|
<span class="font-label-md text-label-md text-on-surface-variant">완료</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Type Selection Grid -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter mb-16">
|
||||||
|
<!-- General Visitor -->
|
||||||
|
<button class="group relative flex flex-col items-center p-8 border border-outline-variant rounded-xl bg-surface-container-lowest hover:border-primary-fixed transition-all duration-300 text-center type-card" onclick="selectType(this)">
|
||||||
|
<div class="check-circle absolute top-4 right-4 opacity-0 transition-opacity">
|
||||||
|
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-16 h-16 rounded-full bg-primary-fixed flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||||
|
<span class="material-symbols-outlined text-primary text-3xl" data-icon="person">person</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface mb-2">일반 관람객</h3>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant">개인 관람 및 일반적인 전시 체험을 원하시는 분</p>
|
||||||
|
</button>
|
||||||
|
<!-- Buyer -->
|
||||||
|
<button class="group relative flex flex-col items-center p-8 border border-outline-variant rounded-xl bg-surface-container-lowest hover:border-primary-fixed transition-all duration-300 text-center type-card" onclick="selectType(this)">
|
||||||
|
<div class="check-circle absolute top-4 right-4 opacity-0 transition-opacity">
|
||||||
|
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-16 h-16 rounded-full bg-secondary-fixed flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||||
|
<span class="material-symbols-outlined text-secondary text-3xl" data-icon="business_center">business_center</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface mb-2">바이어</h3>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant">비즈니스 미팅 및 구매 상담이 목적인 전문 기업 관계자</p>
|
||||||
|
</button>
|
||||||
|
<!-- VIP -->
|
||||||
|
<button class="group relative flex flex-col items-center p-8 border border-outline-variant rounded-xl bg-surface-container-lowest hover:border-primary-fixed transition-all duration-300 text-center type-card" onclick="selectType(this)">
|
||||||
|
<div class="check-circle absolute top-4 right-4 opacity-0 transition-opacity">
|
||||||
|
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-16 h-16 rounded-full bg-tertiary-fixed flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||||
|
<span class="material-symbols-outlined text-tertiary-container text-3xl" data-icon="grade">grade</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface mb-2">VIP</h3>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant">특별 초청을 받으신 분 또는 VIP 혜택 대상자</p>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Action Buttons -->
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<button class="w-full max-w-[240px] bg-surface-container-high text-outline px-8 py-4 rounded-full font-label-md text-label-md transition-all duration-300 cursor-not-allowed flex items-center justify-center gap-2" disabled="" id="nextBtn">
|
||||||
|
다음 단계로
|
||||||
|
<span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Help Section -->
|
||||||
|
<div class="mt-12 text-center max-w-[600px]">
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
||||||
|
등록 과정에서 문제가 발생하셨나요? <a class="text-primary font-bold hover:underline" href="#">방문안내 가이드</a>를 확인하시거나
|
||||||
|
<span class="text-on-surface font-semibold">031-810-8114</span>로 문의해 주세요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="w-full bg-surface-container-low border-t border-outline-variant mt-auto">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-gutter px-container-padding py-section-padding max-w-[1280px] mx-auto">
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<div class="font-title-sm text-title-sm font-bold text-primary">KINTEX</div>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
||||||
|
대한민국 최대 규모의 컨벤션 센터, 고양시 일산에 위치한 KINTEX는 글로벌 비즈니스의 중심입니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
<h4 class="font-label-md text-label-md font-bold text-on-surface">Quick Links</h4>
|
||||||
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Visitor Guide</a>
|
||||||
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Contact Us</a>
|
||||||
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Sitemap</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
<h4 class="font-label-md text-label-md font-bold text-on-surface">Legal</h4>
|
||||||
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors font-bold text-primary underline" href="#">Privacy Policy</a>
|
||||||
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Terms of Service</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
||||||
|
© 2024 KINTEX. All rights reserved. Professional Exhibition Center.
|
||||||
|
</p>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<span class="material-symbols-outlined text-outline cursor-pointer hover:text-primary">language</span>
|
||||||
|
<span class="material-symbols-outlined text-outline cursor-pointer hover:text-primary">share</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
function selectType(element) {
|
||||||
|
// Remove selection from all cards
|
||||||
|
document.querySelectorAll('.type-card').forEach(card => {
|
||||||
|
card.classList.remove('type-card-selected');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add selection to clicked card
|
||||||
|
element.classList.add('type-card-selected');
|
||||||
|
|
||||||
|
// Enable next button
|
||||||
|
const nextBtn = document.getElementById('nextBtn');
|
||||||
|
nextBtn.disabled = false;
|
||||||
|
nextBtn.classList.remove('bg-surface-container-high', 'text-outline', 'cursor-not-allowed');
|
||||||
|
nextBtn.classList.add('bg-primary', 'text-on-primary', 'hover:bg-primary-container', 'shadow-md');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
319
stitch_kintex_ai_system_architect/scr_p4/code_step2_form.html
Normal file
319
stitch_kintex_ai_system_architect/scr_p4/code_step2_form.html
Normal file
@ -0,0 +1,319 @@
|
|||||||
|
<!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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;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>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
-webkit-backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
.chip-selected {
|
||||||
|
background-color: #003765 !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
border-color: #003765 !important;
|
||||||
|
}
|
||||||
|
input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #003765 !important;
|
||||||
|
box-shadow: 0 0 0 2px rgba(0, 55, 101, 0.1);
|
||||||
|
}
|
||||||
|
.step-active {
|
||||||
|
color: #003765;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.step-line-active {
|
||||||
|
background-color: #003765;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"primary": "#003765",
|
||||||
|
"outline": "#727781",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"surface-container-low": "#f2f3ff",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"inverse-primary": "#a2c9ff"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"container-padding": "24px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"section-padding": "96px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"display-lg-mobile": ["Inter"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"headline-md": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-surface font-body-base text-body-base min-h-screen flex flex-col">
|
||||||
|
<!-- Top Navigation Bar -->
|
||||||
|
<header class="bg-surface-bright border-b border-outline-variant sticky top-0 z-50">
|
||||||
|
<nav class="flex justify-between items-center w-full px-container-padding h-16 max-w-[1280px] mx-auto">
|
||||||
|
<div class="font-headline-md text-headline-md font-bold text-primary">KINTEX</div>
|
||||||
|
<div class="hidden md:flex items-center gap-stack-lg">
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors" href="#">Exhibitions</a>
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors" href="#">Facilities</a>
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors" href="#">Services</a>
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors" href="#">About</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<button class="px-4 py-2 text-primary font-label-md hover:bg-surface-container transition-all">Login</button>
|
||||||
|
<button class="px-4 py-2 bg-primary text-on-primary rounded-lg font-label-md hover:bg-primary-container transition-all active:opacity-80">Register</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<!-- Main Content: Multi-step Form Canvas -->
|
||||||
|
<main class="flex-grow relative flex flex-col items-center justify-center py-section-padding px-container-padding overflow-hidden">
|
||||||
|
<!-- Atmospheric Background Element -->
|
||||||
|
<div class="absolute inset-0 z-0 pointer-events-none opacity-20">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Progress Indicator -->
|
||||||
|
<div class="z-10 w-full max-w-xl mb-12">
|
||||||
|
<div class="flex items-center justify-between relative">
|
||||||
|
<!-- Step lines -->
|
||||||
|
<div class="absolute top-1/2 left-0 w-full h-0.5 bg-outline-variant -translate-y-1/2 z-0"></div>
|
||||||
|
<div class="absolute top-1/2 left-0 h-0.5 bg-primary -translate-y-1/2 z-0 transition-all duration-500 ease-in-out" id="progress-line" style="width: 50%;"></div>
|
||||||
|
<!-- Step Circles -->
|
||||||
|
<div class="relative z-10 flex flex-col items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center text-label-md font-bold border-4 border-surface-bright">1</div>
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant">유형 선택</span>
|
||||||
|
</div>
|
||||||
|
<div class="relative z-10 flex flex-col items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center text-label-md font-bold border-4 border-surface-bright transition-colors" id="step-circle-2">2</div>
|
||||||
|
<span class="text-label-xs font-label-xs step-active">정보 입력</span>
|
||||||
|
</div>
|
||||||
|
<div class="relative z-10 flex flex-col items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container-highest text-on-surface-variant flex items-center justify-center text-label-md font-bold border-4 border-surface-bright transition-colors" id="step-circle-3">3</div>
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant">관심 분야</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Form Container -->
|
||||||
|
<div class="z-10 w-full max-w-xl glass-panel border border-outline-variant rounded-xl p-8 shadow-sm">
|
||||||
|
<!-- Step 2: Information Section -->
|
||||||
|
<section class="space-y-stack-lg block" id="step-2-content">
|
||||||
|
<div class="space-y-base">
|
||||||
|
<h2 class="font-headline-md text-headline-md text-primary">참가자 정보 입력</h2>
|
||||||
|
<p class="text-on-surface-variant font-body-sm text-body-sm">정확한 전시 안내를 위해 필수 정보를 입력해 주세요.</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 gap-gutter">
|
||||||
|
<div class="space-y-base">
|
||||||
|
<label class="font-label-md text-label-md text-on-surface">이름</label>
|
||||||
|
<input class="w-full h-12 px-4 rounded-lg bg-surface-container-lowest border border-outline-variant focus:border-primary transition-all text-body-base" placeholder="성함을 입력하세요" type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-base">
|
||||||
|
<label class="font-label-md text-label-md text-on-surface">이메일</label>
|
||||||
|
<input class="w-full h-12 px-4 rounded-lg bg-surface-container-lowest border border-outline-variant focus:border-primary transition-all text-body-base" placeholder="example@domain.com" type="email"/>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
|
||||||
|
<div class="space-y-base">
|
||||||
|
<label class="font-label-md text-label-md text-on-surface">연락처</label>
|
||||||
|
<input class="w-full h-12 px-4 rounded-lg bg-surface-container-lowest border border-outline-variant focus:border-primary transition-all text-body-base" placeholder="010-0000-0000" type="tel"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-base">
|
||||||
|
<label class="font-label-md text-label-md text-on-surface">소속 (회사/기관)</label>
|
||||||
|
<input class="w-full h-12 px-4 rounded-lg bg-surface-container-lowest border border-outline-variant focus:border-primary transition-all text-body-base" placeholder="소속 명칭" type="text"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pt-stack-md flex justify-end">
|
||||||
|
<button class="px-8 py-3 bg-primary text-on-primary rounded-lg font-label-md hover:bg-primary-container transition-all flex items-center gap-2" onclick="goToStep(3)">
|
||||||
|
다음 단계
|
||||||
|
<span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Step 3: Interests & Consent Section (Hidden initially) -->
|
||||||
|
<section class="space-y-stack-lg hidden" id="step-3-content">
|
||||||
|
<div class="space-y-base">
|
||||||
|
<button class="flex items-center gap-1 text-primary font-label-md mb-2 hover:underline" onclick="goToStep(2)">
|
||||||
|
<span class="material-symbols-outlined text-sm">arrow_back</span>
|
||||||
|
이전으로
|
||||||
|
</button>
|
||||||
|
<h2 class="font-headline-md text-headline-md text-primary">관심 분야 및 동의</h2>
|
||||||
|
<p class="text-on-surface-variant font-body-sm text-body-sm">관심 분야를 선택하시면 맞춤형 전시 정보를 제공해 드립니다.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Interest Chips -->
|
||||||
|
<div class="space-y-stack-md">
|
||||||
|
<label class="font-label-md text-label-md text-on-surface">관심 분야 (다중 선택 가능)</label>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<button class="px-4 py-2 rounded-full border border-outline-variant bg-surface-container-low text-on-surface-variant font-label-md transition-all hover:border-primary" onclick="toggleChip(this)">로보틱스</button>
|
||||||
|
<button class="px-4 py-2 rounded-full border border-outline-variant bg-surface-container-low text-on-surface-variant font-label-md transition-all hover:border-primary" onclick="toggleChip(this)">AI 솔루션</button>
|
||||||
|
<button class="px-4 py-2 rounded-full border border-outline-variant bg-surface-container-low text-on-surface-variant font-label-md transition-all hover:border-primary" onclick="toggleChip(this)">빅데이터</button>
|
||||||
|
<button class="px-4 py-2 rounded-full border border-outline-variant bg-surface-container-low text-on-surface-variant font-label-md transition-all hover:border-primary" onclick="toggleChip(this)">스마트 팩토리</button>
|
||||||
|
<button class="px-4 py-2 rounded-full border border-outline-variant bg-surface-container-low text-on-surface-variant font-label-md transition-all hover:border-primary" onclick="toggleChip(this)">IoT 기술</button>
|
||||||
|
<button class="px-4 py-2 rounded-full border border-outline-variant bg-surface-container-low text-on-surface-variant font-label-md transition-all hover:border-primary" onclick="toggleChip(this)">디지털 트윈</button>
|
||||||
|
<button class="px-4 py-2 rounded-full border border-outline-variant bg-surface-container-low text-on-surface-variant font-label-md transition-all hover:border-primary" onclick="toggleChip(this)">보안 플랫폼</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Consents -->
|
||||||
|
<div class="space-y-stack-md pt-4 border-t border-outline-variant">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<input class="mt-1 w-5 h-5 text-primary border-outline-variant rounded focus:ring-primary" id="consent-1" type="checkbox"/>
|
||||||
|
<label class="font-body-base text-body-base cursor-pointer" for="consent-1">
|
||||||
|
개인정보 수집·이용 동의 <span class="text-error font-bold">(필수)</span>
|
||||||
|
<a class="block text-label-xs text-on-surface-variant underline mt-1" href="#">내용 보기</a>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<input class="mt-1 w-5 h-5 text-primary border-outline-variant rounded focus:ring-primary" id="consent-2" type="checkbox"/>
|
||||||
|
<label class="font-body-base text-body-base cursor-pointer" for="consent-2">
|
||||||
|
마케팅 수신 동의 <span class="text-on-surface-variant font-normal">(선택)</span>
|
||||||
|
<p class="text-label-xs text-on-surface-variant mt-1">이벤트 및 소식 정보를 받아보실 수 있습니다.</p>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pt-stack-md">
|
||||||
|
<button class="w-full py-4 bg-primary text-on-primary rounded-lg font-title-sm text-title-sm hover:bg-primary-container transition-all shadow-md active:scale-[0.98]">
|
||||||
|
등록하기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-surface-container-low border-t border-outline-variant mt-auto">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-gutter px-container-padding py-stack-lg max-w-[1280px] mx-auto">
|
||||||
|
<div class="lg:col-span-2 space-y-stack-sm">
|
||||||
|
<div class="font-title-sm text-title-sm font-bold text-primary">KINTEX</div>
|
||||||
|
<p class="text-on-surface-variant font-body-sm text-body-sm">
|
||||||
|
© 2024 KINTEX. All rights reserved.<br/>
|
||||||
|
Professional Exhibition Center. Global Business Hub.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<h4 class="font-label-md text-label-md text-on-surface font-bold">Policy</h4>
|
||||||
|
<a class="text-on-surface-variant font-body-sm text-body-sm hover:text-primary transition-all" href="#">Privacy Policy</a>
|
||||||
|
<a class="text-on-surface-variant font-body-sm text-body-sm hover:text-primary transition-all" href="#">Terms of Service</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<h4 class="font-label-md text-label-md text-on-surface font-bold">Inquiry</h4>
|
||||||
|
<a class="text-on-surface-variant font-body-sm text-body-sm hover:text-primary transition-all" href="#">Visitor Guide</a>
|
||||||
|
<a class="text-on-surface-variant font-body-sm text-body-sm hover:text-primary transition-all" href="#">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
function goToStep(step) {
|
||||||
|
const step2 = document.getElementById('step-2-content');
|
||||||
|
const step3 = document.getElementById('step-3-content');
|
||||||
|
const progressLine = document.getElementById('progress-line');
|
||||||
|
const circle3 = document.getElementById('step-circle-3');
|
||||||
|
|
||||||
|
if (step === 3) {
|
||||||
|
step2.classList.replace('block', 'hidden');
|
||||||
|
step3.classList.replace('hidden', 'block');
|
||||||
|
progressLine.style.width = '100%';
|
||||||
|
circle3.classList.replace('bg-surface-container-highest', 'bg-primary');
|
||||||
|
circle3.classList.replace('text-on-surface-variant', 'text-on-primary');
|
||||||
|
} else if (step === 2) {
|
||||||
|
step3.classList.replace('block', 'hidden');
|
||||||
|
step2.classList.replace('hidden', 'block');
|
||||||
|
progressLine.style.width = '50%';
|
||||||
|
circle3.classList.replace('bg-primary', 'bg-surface-container-highest');
|
||||||
|
circle3.classList.replace('text-on-primary', 'text-on-surface-variant');
|
||||||
|
}
|
||||||
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleChip(btn) {
|
||||||
|
btn.classList.toggle('chip-selected');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Micro-interaction for inputs
|
||||||
|
document.querySelectorAll('input').forEach(input => {
|
||||||
|
input.addEventListener('focus', () => {
|
||||||
|
input.parentElement.querySelector('label')?.classList.add('text-primary');
|
||||||
|
});
|
||||||
|
input.addEventListener('blur', () => {
|
||||||
|
input.parentElement.querySelector('label')?.classList.remove('text-primary');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
321
stitch_kintex_ai_system_architect/scr_p5/code.html
Normal file
321
stitch_kintex_ai_system_architect/scr_p5/code.html
Normal file
@ -0,0 +1,321 @@
|
|||||||
|
<!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 Exhibitor Microsite</title>
|
||||||
|
<!-- Tailwind CSS -->
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<!-- Google Fonts: Inter & Geist for modern typography -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Geist:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||||
|
<!-- Material Symbols -->
|
||||||
|
<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": {
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"outline": "#727781",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"primary": "#003765",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"secondary-fixed": "#e5deff"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"section-padding": "96px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"base": "4px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"stack-md": "16px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"title-sm": ["Inter", "sans-serif"],
|
||||||
|
"display-lg-mobile": ["Inter", "sans-serif"],
|
||||||
|
"body-sm": ["Inter", "sans-serif"],
|
||||||
|
"headline-md": ["Inter", "sans-serif"],
|
||||||
|
"body-base": ["Inter", "sans-serif"],
|
||||||
|
"label-xs": ["Geist", "sans-serif"],
|
||||||
|
"label-md": ["Geist", "sans-serif"],
|
||||||
|
"display-lg": ["Inter", "sans-serif"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"title-sm": ["18px", { "lineHeight": "28px", "fontWeight": "600" }],
|
||||||
|
"display-lg-mobile": ["28px", { "lineHeight": "36px", "fontWeight": "700" }],
|
||||||
|
"body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
|
||||||
|
"headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
|
||||||
|
"body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
|
||||||
|
"label-xs": ["11px", { "lineHeight": "14px", "fontWeight": "500" }],
|
||||||
|
"label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600" }],
|
||||||
|
"display-lg": ["36px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
.ai-watermark {
|
||||||
|
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-bright text-on-background selection:bg-primary-fixed selection:text-on-primary-fixed">
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="docked full-width top-0 sticky z-50 bg-surface/80 backdrop-blur-md border-b border-outline-variant/30 shadow-sm h-20 flex items-center">
|
||||||
|
<nav class="max-w-[1280px] mx-auto w-full px-container-padding flex justify-between items-center">
|
||||||
|
<div class="font-display-lg text-display-lg text-primary font-bold tracking-tight">
|
||||||
|
(주)한빛로보틱스
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-stack-lg">
|
||||||
|
<a class="font-title-sm text-title-sm text-primary border-b-2 border-primary pb-1 transition-colors duration-200" href="#">전시안내</a>
|
||||||
|
<a class="font-title-sm text-title-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">제품소개</a>
|
||||||
|
<a class="font-title-sm text-title-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">미팅예약</a>
|
||||||
|
<button class="bg-primary text-on-primary px-6 py-2.5 rounded-lg font-label-md text-label-md active:scale-95 transition-transform duration-150 ml-gutter">
|
||||||
|
문의하기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button class="md:hidden text-primary">
|
||||||
|
<span class="material-symbols-outlined">menu</span>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="relative min-h-[700px] flex items-center overflow-hidden">
|
||||||
|
<div class="absolute inset-0 z-0">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A massive, high-tech industrial robot arm in a pristine white laboratory environment, featuring glowing blue LED accents and precision joints. The setting is bright and clinical, with large windows and a clean concrete floor, reflecting a modern light-mode corporate aesthetic. The mood is advanced, reliable, and cutting-edge, utilizing a professional palette of whites and corporate blues." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCC5jPdMP0oQYI0lpM-2tFCmRgVmuZ68QFJYbBt2_gtlGPU7ybqLuMKalQumaq3xNdr8HUio-8VxpDvj99CteaeJhk3P4Z_NCt7NCCr_ScugHzGJVCYBt_g1_N1B7GQQfZhLrAhB8qQw0Wh69jK-rjWTxSE4PKwGsPTSaH2uI1iIF_QFwH-0HIkMQCSF56PdH1V4Z-K-nMtSklHZRp8emLVTfmuqG7iRZJxYk8M0deX3F2VkmDrtu7D933PgNjJl2i5FBBvst3HfbI"/>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-r from-background via-background/40 to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
<div class="relative z-10 max-w-[1280px] mx-auto w-full px-container-padding">
|
||||||
|
<div class="max-w-2xl">
|
||||||
|
<span class="inline-block bg-primary-fixed text-on-primary-fixed px-3 py-1 rounded-full font-label-md text-label-md mb-stack-md">
|
||||||
|
Global Robotics Leader
|
||||||
|
</span>
|
||||||
|
<h1 class="font-display-lg text-display-lg text-on-background mb-stack-sm leading-tight">
|
||||||
|
(주)한빛로보틱스
|
||||||
|
</h1>
|
||||||
|
<p class="font-headline-md text-headline-md text-on-surface-variant mb-12">
|
||||||
|
미래를 움직이는 지능형 로보틱스 솔루션
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap gap-stack-md">
|
||||||
|
<button class="bg-primary text-on-primary px-8 py-4 rounded-xl font-title-sm text-title-sm hover:bg-primary-container transition-all shadow-md">
|
||||||
|
미팅 예약
|
||||||
|
</button>
|
||||||
|
<button class="bg-white/10 backdrop-blur-md border border-white/30 text-on-background px-8 py-4 rounded-xl font-title-sm text-title-sm hover:bg-white/20 transition-all">
|
||||||
|
기업 소개서
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Booth Info Card (Floating Overlay Style) -->
|
||||||
|
<section class="max-w-[1280px] mx-auto px-container-padding -mt-20 relative z-20">
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant shadow-md p-stack-lg rounded-xl flex flex-col md:flex-row items-center justify-between gap-gutter">
|
||||||
|
<div class="flex items-center gap-stack-lg">
|
||||||
|
<div class="bg-primary-container/10 p-4 rounded-full">
|
||||||
|
<span class="material-symbols-outlined text-primary text-4xl">location_on</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-title-sm text-title-sm text-on-surface">KINTEX 전시장 부스 위치</h3>
|
||||||
|
<p class="font-body-base text-body-base text-primary font-bold">부스 위치 · A-102 홀7</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="flex items-center gap-stack-sm text-primary font-label-md text-label-md hover:underline decoration-2 underline-offset-4" href="#">
|
||||||
|
<span class="material-symbols-outlined">map</span>
|
||||||
|
전시장 도면 보기
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Product Showcase -->
|
||||||
|
<section class="py-section-padding">
|
||||||
|
<div class="max-w-[1280px] mx-auto px-container-padding">
|
||||||
|
<div class="mb-16">
|
||||||
|
<h2 class="font-display-lg text-display-lg text-on-background mb-stack-sm">핵심 제품 라인업</h2>
|
||||||
|
<div class="w-20 h-1.5 bg-primary rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
||||||
|
<!-- Product Card 1 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden group hover:shadow-md transition-shadow border-l-4 border-l-primary">
|
||||||
|
<div class="h-64 overflow-hidden bg-surface-container">
|
||||||
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A close-up photograph of the HR-A1 collaborative robot arm, showing its sleek, segmented white body and articulated joints. The lighting is soft and even, highlighting the clean industrial design against a blurred tech-office background. It exudes safety and precision, with high-quality materials and a modern professional feel." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD7OZa-KYPrl0XYqzJj58FLBe6BTrUV3LZTOhBbSQDdifMblQ-5vSP415roqgeuOPpuM9UEtRhaEWTkiccGOnJkptoeOtocjrSBzlys8PMGgc2KH2uXtJ1uSSpSxxtb9Ueqy6ednSNBfOovllZfgM1SBWSG5BCtiBLg8aqIpBtq4gD7O2TlbIiN-OBZgncBMSNA9pEYRcvMwZ08eOwa2Evq17qSIak8JfJOOpkI0sre68vCa1JYZMKwq1tfqVgWXJF9ZcqAmPkDyG4"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-lg">
|
||||||
|
<span class="font-label-md text-label-md text-primary bg-primary-fixed px-2 py-0.5 rounded mb-stack-sm inline-block">Industrial COBOT</span>
|
||||||
|
<h4 class="font-title-sm text-title-sm text-on-surface mb-stack-sm">HR-A1 협동 로봇</h4>
|
||||||
|
<p class="font-body-base text-body-base text-on-surface-variant mb-stack-lg">고도의 정밀도와 안전성을 갖춘 산업용 협동 로봇입니다. 인간과의 협업을 최우선으로 설계되었습니다.</p>
|
||||||
|
<button class="w-full py-2.5 border border-outline-variant rounded-lg font-label-md text-label-md hover:bg-primary hover:text-on-primary transition-colors">자세히 보기</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Product Card 2 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden group hover:shadow-md transition-shadow border-l-4 border-l-secondary">
|
||||||
|
<div class="h-64 overflow-hidden bg-surface-container">
|
||||||
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="The HR-M3 autonomous mobile robot (AMR) navigating a warehouse floor. It is a sleek, low-profile vehicle with sensors and a modular top platform. The factory background is clean and organized, with soft blue ambient lighting that emphasizes the smart factory automation aesthetic. The design is robust and modern." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCvi9hLgpoqM37bRXqWVajDzwnG6_RwtYyrP60Ef_xKVDnXSFpSlVWkiBdaXqE3z3aRlhdvT6fTfuq3YD20TI-fl4PaNaBnpqBmDJ5TpDutAy4KcokejBuZmv9s8C3YUJgNDiVFrq1nmuqmiv-ISIuf1L1oMTQYPcHjOproOWVmP7c-jMu9JHw0rokKmUwyeQ4cpwbJdVRlkP1jVAXcsPckSyLqEfwRg1vnheSSppFhr0q8OFbkj4BmA8mDWLOFfhHNo1atx-ja0CI"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-lg">
|
||||||
|
<span class="font-label-md text-label-md text-secondary bg-secondary-fixed px-2 py-0.5 rounded mb-stack-sm inline-block">Smart Logistics</span>
|
||||||
|
<h4 class="font-title-sm text-title-sm text-on-surface mb-stack-sm">HR-M3 자율주행 AMR</h4>
|
||||||
|
<p class="font-body-base text-body-base text-on-surface-variant mb-stack-lg">스마트 팩토리 물류 효율을 극대화하는 자율 이동 로봇입니다. 실시간 장애물 회피와 경로 최적화 기능을 갖추고 있습니다.</p>
|
||||||
|
<button class="w-full py-2.5 border border-outline-variant rounded-lg font-label-md text-label-md hover:bg-primary hover:text-on-primary transition-colors">자세히 보기</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Product Card 3 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden group hover:shadow-md transition-shadow border-l-4 border-l-tertiary">
|
||||||
|
<div class="h-64 overflow-hidden bg-surface-container">
|
||||||
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="The HR-Q Vision scanner in action, projecting a grid of light onto a mechanical part for quality inspection. The environment is dark-themed with focused spotlighting, creating a high-tech inspection mood. The scanner has a metallic, premium finish and integrated AI processing units visible in the design." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAzq13j9Ej2M8W1HW_TSJy-KR9pXchnSM1HP8vTpvB2yeAMDsLrNUeRhIbrW24hSm-NqpTIqWymyrvGYtxKSTFqdwpvX_Uv-SA2yatAkUoF5t9cvN8qThDFnZSXEZ8w48VdGs8xsE4tAV3XgZgYpugXwvoNtVXbqNbPhJ_fxtQ-79lhdo5nKFm6J2psXpsA9q80FKgRudwAC-j5CH9484zHvZpligh17SCZ8kuC1Jo2p-_i3-ABwoVzKATyWQyIdlowWPUi5KUt4XU"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-lg">
|
||||||
|
<span class="font-label-md text-label-md text-tertiary bg-tertiary-fixed px-2 py-0.5 rounded mb-stack-sm inline-block">AI Vision</span>
|
||||||
|
<h4 class="font-title-sm text-title-sm text-on-surface mb-stack-sm">HR-Q Vision 스캐너</h4>
|
||||||
|
<p class="font-body-base text-body-base text-on-surface-variant mb-stack-lg">AI 기반 딥러닝 기술로 완벽한 품질 검수를 보장합니다. 미세한 결함도 놓치지 않는 초정밀 3D 스캐닝을 지원합니다.</p>
|
||||||
|
<button class="w-full py-2.5 border border-outline-variant rounded-lg font-label-md text-label-md hover:bg-primary hover:text-on-primary transition-colors">자세히 보기</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- AI Booth Gallery Section -->
|
||||||
|
<section class="py-section-padding bg-surface-container-low">
|
||||||
|
<div class="max-w-[1280px] mx-auto px-container-padding">
|
||||||
|
<div class="text-center mb-16 max-w-3xl mx-auto">
|
||||||
|
<h2 class="font-display-lg text-display-lg text-on-background mb-stack-sm">부스 미리보기</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-lg">
|
||||||
|
<div class="relative rounded-xl overflow-hidden shadow-sm group">
|
||||||
|
<img class="w-full h-[400px] object-cover" data-alt="A wide-angle view of a futuristic exhibition booth for Hanbit Robotics. The structure features sweeping curves, integrated blue neon lighting, and large digital displays showing robotic arms. Multiple robotic workstations are arranged across the gray carpeted floor, with professional attendees interacting with the technology. The lighting is bright and expansive, reflecting the KINTEX venue scale." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCimWurGsjObNQXff4cID-YYj5L7qxSBIhWBn28679h2dTWRl1dKgb7HkT9sMn7VtNoKcF4eNTC8JLcbH-9MYXq0HambujhK3jhSLAZ208dk4Wgf8WsBhjM7742kBLOPY_X76hQgDb1w12nw2eT8tmZCYq6PR3FGzA9qIutbaM5iJ7Xev4KLca6ihSFfPyBeI5zuciq2lXNafmy7Lsd7R75FL6OJOKi3LycB4YuyGCpClc6c3RLKK8_mP3tsw0W1CG4PbFo0wIfmuY"/>
|
||||||
|
<div class="absolute bottom-4 right-4 text-[10px] text-white/60 ai-watermark font-label-xs">AI 생성 예상 이미지</div>
|
||||||
|
<div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||||
|
<span class="text-white font-bold text-lg px-4 py-2 border-2 border-white rounded-lg">전체 보기</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="relative rounded-xl overflow-hidden shadow-sm group">
|
||||||
|
<img class="w-full h-[400px] object-cover" data-alt="A detailed view of a VIP lounge area within the Hanbit Robotics booth. Modern gray sofas are arranged around geometric coffee tables, with professional visitors engaged in discussions. Behind them, a large curved screen displays complex engineering schematics and robotic data. The atmosphere is sophisticated and collaborative, featuring indoor plants and warm architectural lighting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDfwXa5yfmmM54OHV6tAksxyRoIeIlkDLwE729oI7aQ9r_ArOPk4KYq-ACdR4_7odNkasv_0hNcB6Wth26qhoh1Rgl-YX8MeE_JJS8olx4FF-ItvDMShh8DgDJ3TGPM7Mi5TXDv73phN3R4Q1mHKhMGETQtPKfBejXYqdcTPR10wSqbWIS371kTHV1Ajmpah4JpNuMaI9w8hf2Z0Q7UX74cfSdaH7ELZJqVt9fTCfN-Wp6x9uOAHgJGv9svTEtMhwxJqMn88jnmZ_o"/>
|
||||||
|
<div class="absolute bottom-4 right-4 text-[10px] text-white/60 ai-watermark font-label-xs">AI 생성 예상 이미지</div>
|
||||||
|
<div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||||
|
<span class="text-white font-bold text-lg px-4 py-2 border-2 border-white rounded-lg">라운지 보기</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Final CTA Banner -->
|
||||||
|
<section class="py-section-padding bg-primary text-on-primary overflow-hidden relative">
|
||||||
|
<!-- Subtle background pattern using a gradient overlay -->
|
||||||
|
<div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white via-transparent to-transparent"></div>
|
||||||
|
<div class="max-w-[1280px] mx-auto px-container-padding relative z-10 text-center">
|
||||||
|
<h2 class="font-display-lg text-display-lg mb-stack-lg max-w-4xl mx-auto">
|
||||||
|
귀사의 비즈니스에 맞는 맞춤형 로봇 솔루션을 제안해 드립니다.
|
||||||
|
</h2>
|
||||||
|
<button class="bg-white text-primary px-10 py-5 rounded-full font-title-sm text-title-sm hover:bg-surface-container transition-all shadow-xl active:scale-95">
|
||||||
|
지금 문의하기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="full-width py-section-padding bg-surface-container-lowest border-t border-outline-variant">
|
||||||
|
<div class="max-w-[1280px] mx-auto px-container-padding flex flex-col md:flex-row justify-between items-start gap-stack-lg">
|
||||||
|
<div class="max-w-md">
|
||||||
|
<div class="font-title-sm text-title-sm text-on-surface mb-stack-md">(주)한빛로보틱스</div>
|
||||||
|
<p class="font-body-base text-body-base text-on-surface-variant/80 mb-stack-lg">
|
||||||
|
지능형 자율주행 로봇 및 협동 로봇 전문 기업으로 산업 전반의 디지털 전환과 자동화를 선도합니다.
|
||||||
|
</p>
|
||||||
|
<div class="flex gap-stack-md text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined hover:text-primary cursor-pointer">public</span>
|
||||||
|
<span class="material-symbols-outlined hover:text-primary cursor-pointer">mail</span>
|
||||||
|
<span class="material-symbols-outlined hover:text-primary cursor-pointer">call</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-stack-md">
|
||||||
|
<div class="flex flex-wrap gap-stack-lg">
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant/80 hover:text-primary underline transition-all" href="#">이용약관</a>
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant/80 hover:text-primary underline transition-all" href="#">개인정보처리방침</a>
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant/80 hover:text-primary underline transition-all" href="#">찾아오시는 길</a>
|
||||||
|
</div>
|
||||||
|
<p class="font-body-base text-body-base text-on-surface-variant/80">
|
||||||
|
© 2024 (주)한빛로보틱스. All rights reserved. KINTEX Official Partner.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!-- Simple Scroll Interaction -->
|
||||||
|
<script>
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const header = document.querySelector('header');
|
||||||
|
if (window.scrollY > 20) {
|
||||||
|
header.classList.add('shadow-md');
|
||||||
|
header.classList.remove('shadow-sm');
|
||||||
|
} else {
|
||||||
|
header.classList.add('shadow-sm');
|
||||||
|
header.classList.remove('shadow-md');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// CTA interactions
|
||||||
|
document.querySelectorAll('button').forEach(btn => {
|
||||||
|
btn.addEventListener('mousedown', () => btn.classList.add('scale-95'));
|
||||||
|
btn.addEventListener('mouseup', () => btn.classList.remove('scale-95'));
|
||||||
|
btn.addEventListener('mouseleave', () => btn.classList.remove('scale-95'));
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
373
stitch_kintex_ai_system_architect/scr_p6/code.html
Normal file
373
stitch_kintex_ai_system_architect/scr_p6/code.html
Normal file
@ -0,0 +1,373 @@
|
|||||||
|
<!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 AI System</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@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>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.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": {
|
||||||
|
"surface": "#faf8ff",
|
||||||
|
"on-tertiary-fixed-variant": "#005236",
|
||||||
|
"surface-container-low": "#f1f3ff",
|
||||||
|
"on-surface-variant": "#424750",
|
||||||
|
"surface-container-highest": "#dbe2fa",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"tertiary-fixed-dim": "#72daa9",
|
||||||
|
"primary-fixed": "#d3e4ff",
|
||||||
|
"on-tertiary-container": "#68d1a0",
|
||||||
|
"on-primary-fixed": "#001c38",
|
||||||
|
"on-secondary-fixed-variant": "#4500d8",
|
||||||
|
"on-background": "#141b2c",
|
||||||
|
"on-primary-container": "#91c0ff",
|
||||||
|
"outline": "#727781",
|
||||||
|
"surface-tint": "#24609e",
|
||||||
|
"tertiary": "#003e28",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-tertiary-fixed": "#002113",
|
||||||
|
"surface-dim": "#d3d9f1",
|
||||||
|
"primary": "#0066B3", /* Adjusted to #0066B3 per prompt */
|
||||||
|
"on-surface": "#141b2c",
|
||||||
|
"surface-bright": "#f9f9ff",
|
||||||
|
"surface-container-high": "#e1e7ff",
|
||||||
|
"on-secondary-container": "#f3edff",
|
||||||
|
"surface-variant": "#dbe2fa",
|
||||||
|
"inverse-on-surface": "#eef0ff",
|
||||||
|
"background": "#faf8ff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"secondary-fixed-dim": "#c9bfff",
|
||||||
|
"inverse-primary": "#a2c9ff",
|
||||||
|
"on-secondary-fixed": "#1b0063",
|
||||||
|
"secondary-container": "#6d4aff",
|
||||||
|
"surface-container": "#eaedff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"secondary-fixed": "#e5deff",
|
||||||
|
"error-red": "#ba1a1a",
|
||||||
|
"primary-fixed-dim": "#a2c9ff",
|
||||||
|
"primary-container": "#004e8b",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"on-primary-fixed-variant": "#004881",
|
||||||
|
"tertiary-container": "#00583b",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"tertiary-fixed": "#8ef7c4",
|
||||||
|
"inverse-surface": "#293042",
|
||||||
|
"secondary": "#5427e6",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"on-primary": "#ffffff"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"section-padding": "96px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-lg": "24px",
|
||||||
|
"gutter": "16px",
|
||||||
|
"container-padding": "24px",
|
||||||
|
"base": "4px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"body-sm": ["Inter"],
|
||||||
|
"display-lg-mobile": ["Inter"],
|
||||||
|
"title-sm": ["Inter"],
|
||||||
|
"label-xs": ["Geist"],
|
||||||
|
"label-md": ["Geist"],
|
||||||
|
"body-base": ["Inter"],
|
||||||
|
"display-lg": ["Inter"],
|
||||||
|
"headline-md": ["Inter"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||||
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}],
|
||||||
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||||
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||||||
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||||||
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||||
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface text-on-surface font-body-base">
|
||||||
|
<!-- TopNavBar -->
|
||||||
|
<header class="bg-surface-container-lowest sticky top-0 z-50 border-b border-outline-variant shadow-sm h-16">
|
||||||
|
<div class="max-w-[1280px] mx-auto px-gutter h-full flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-stack-lg">
|
||||||
|
<img alt="KINTEX AI System Logo" class="h-8 object-contain cursor-pointer active:scale-95 transition-all" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCWbBcPlkS-8oJMJSsdUseZODxf0oXCo4YyLHUTmZg9zQFCCFzIYKM-4M2qAmulgLlEhvkjAY9lDkOWmV8yc9riUVhEPGmHEEK2fkhIaE-9l_dCDoQTc9C51XcwG6RPq36gNVyCK_6PSVZETjTd7CbxQe9ORYJi4Omrf-SI8_-bE_47-zy1jXfl4efTc93CgEaUbQAV_m7doXWy9tc_OAvtzQ9pmS-EgtGRCDzJxplrQIUVuXXJrcIjR3KITUL8y0DvSvup0oenl0w"/>
|
||||||
|
</div>
|
||||||
|
<nav class="hidden md:flex items-center gap-stack-lg">
|
||||||
|
<a class="font-title-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">전시 안내</a>
|
||||||
|
<a class="font-title-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">시설 안내</a>
|
||||||
|
<a class="font-title-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">고객 지원</a>
|
||||||
|
<a class="font-title-sm text-primary border-b-2 border-primary pb-1" href="#">참가 문의</a>
|
||||||
|
</nav>
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<div class="relative hidden lg:block">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant" style="font-size: 20px;">search</span>
|
||||||
|
<input class="pl-10 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-full text-body-sm focus:outline-none focus:ring-2 focus:ring-primary/20 w-64" placeholder="검색" type="text"/>
|
||||||
|
</div>
|
||||||
|
<button class="bg-primary text-on-primary font-title-sm px-6 py-2 rounded-lg hover:bg-primary-container transition-all active:scale-95 cursor-pointer">Sign In</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="relative h-[400px] flex items-center overflow-hidden">
|
||||||
|
<div class="absolute inset-0 z-0">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-r from-primary/90 to-transparent z-10"></div>
|
||||||
|
<div class="w-full h-full bg-cover bg-center" data-alt="A sprawling, futuristic exhibition hall viewed from a high angle, showcasing complex architectural structures with glass ceilings. Thousands of professional attendees move through the brightly lit, modern KINTEX venue. The atmosphere is energetic, clean, and dominated by soft blues and metallic greys, reflecting a global connectivity hub for high-end corporate events." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDrnpnqtByYthQSmcBQHloma2K4jnwYG64OhLHqVrTXkz8yL748tMwsn92726B1qlTb4BgaEOJgysdyrtDi5Orov7jx1JCT_WizEe7eagcVKqBmDfWE5WmPG3POVZiakqf2RRI4AWsNFZyAIyWsYKxtRDva8z4sFwARvh4Ra5v6lwaT6eaPjYwIwrN7CzB5kpoOkRRgrIuueq5maOXOakHbWpE1RdHFyhGkkYIj5AcBfT0oEoUFOIyN8ax3G6S7i84GFy5KXho2Fwo')"></div>
|
||||||
|
</div>
|
||||||
|
<div class="relative z-20 max-w-[1280px] mx-auto px-gutter w-full">
|
||||||
|
<div class="max-w-2xl">
|
||||||
|
<h1 class="font-display-lg text-display-lg text-white mb-stack-sm">참가 문의</h1>
|
||||||
|
<p class="font-title-sm text-white/90">KINTEX AI System과 함께 귀사의 비즈니스를 글로벌 시장으로 확장하세요.<br/>전문 컨설턴트가 최적의 전시 공간을 제안해 드립니다.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Exhibition Guide Section -->
|
||||||
|
<section class="py-section-padding bg-surface">
|
||||||
|
<div class="max-w-[1280px] mx-auto px-gutter">
|
||||||
|
<div class="mb-stack-lg flex flex-col items-center text-center">
|
||||||
|
<h2 class="font-headline-md text-headline-md mb-2">참가 안내</h2>
|
||||||
|
<div class="h-1 w-12 bg-primary rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-stack-lg">
|
||||||
|
<!-- Card 1: Shell Scheme -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden hover:shadow-md transition-all group border-l-4 border-l-primary">
|
||||||
|
<div class="h-48 overflow-hidden">
|
||||||
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A clean and professional shell scheme exhibition booth interior, featuring white walls, standard spotlights, and grey carpeting. A small reception desk and two chairs are arranged neatly. The lighting is bright and even, highlighting the efficiency and accessibility of this standard corporate exhibition setup." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAZl7-XW2rx4BJmPG9U_Ln-FTm-atdZx91991hIoULVy1amvPJtsB9OVOP6U2CpBxz5zZsRVvAuJ0nqcCn7PfbQXwtgkv5FeWzqveUJJ18mPCDTv4-apwx9pLij4q-99NQ1NRXDAwbLJPUbRe4qImqnlu3XWnRUW77SP2YLohhk4TcuE8yZmEg04WgjcPXTnYPK8tSUPUkOdbnUxVd8ftZNkJ7BdoCk6EA5ZVAVaqpQ6qYUcKEgn-rubItfwqi-n3Vte7pMkyF5F-0"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-container-padding">
|
||||||
|
<span class="inline-block bg-primary-fixed text-on-primary-fixed text-label-md px-2 py-1 rounded mb-stack-sm">Entry Tier</span>
|
||||||
|
<h3 class="font-title-sm text-title-sm mb-2">조립부스 (Shell Scheme)</h3>
|
||||||
|
<p class="text-on-surface-variant font-body-sm mb-4">기본 벽체 및 바닥이 제공되는 가장 경제적인 선택입니다. 소규모 기업과 효율적인 운영을 선호하는 참가사에 추천합니다.</p>
|
||||||
|
<div class="flex items-center justify-between mt-auto pt-4 border-t border-outline-variant/30">
|
||||||
|
<span class="text-primary font-bold">₩ 2,500,000 / unit</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 2: Raw Space -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden hover:shadow-md transition-all group border-l-4 border-l-secondary">
|
||||||
|
<div class="h-48 overflow-hidden">
|
||||||
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A wide-angle shot of a large, empty raw space exhibition area within a high-tech convention center. The concrete floor reflects the bright overhead LED lighting. Subtle architectural lines and structural columns frame the space, suggesting limitless creative potential for custom-designed brand pavilions and large-scale installations." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDBPMYmsTBjg9hJy0eZhZ_mk1wCrnFZa4qqrUO8v_zabow-EOcIxTsqoS3-Tr_4PwrwWhf5FHarIejv5tS1K3Qw9Xv_7ZuCZ0MyKO_lxQ1mJCZPBDzBWUogNXNfmK2FhcU2IoWnoJUCrfFl2Hy0qWkRtz1Do49BxCIETxP15mcDxy2CwztqNl_nqOxPczQglfzq2ynt0koiAUEf6OU72C3upXNVcAP8ej3tmuofCkHjVN5u7upeefWuy-Pco2iS4t45FzeR9_i0lws"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-container-padding">
|
||||||
|
<span class="inline-block bg-secondary-fixed text-on-secondary-fixed text-label-md px-2 py-1 rounded mb-stack-sm">Design Freedom</span>
|
||||||
|
<h3 class="font-title-sm text-title-sm mb-2">독립부스 (Raw Space)</h3>
|
||||||
|
<p class="text-on-surface-variant font-body-sm mb-4">공간만 제공되어 브랜드 아이덴티티에 맞는 자유로운 디자인 설계가 가능합니다. 독창적인 홍보 효과를 극대화할 수 있습니다.</p>
|
||||||
|
<div class="flex items-center justify-between mt-auto pt-4 border-t border-outline-variant/30">
|
||||||
|
<span class="text-secondary font-bold">₩ 2,000,000 / unit</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 3: Premium AI -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden hover:shadow-md transition-all group border-l-4 border-l-tertiary">
|
||||||
|
<div class="h-48 overflow-hidden">
|
||||||
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="An ultra-modern premium exhibition booth with integrated digital displays, glass surfaces, and warm accent lighting. The design features curved architectural elements and interactive kiosks. Professional branding and AI-optimized pathways for visitor flow are visible, creating an atmosphere of cutting-edge innovation and high-end luxury." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAMf6tGaJOI1Cl4-tGXLPCsLG8R7RmaPKFzFJm7kfcX80YOfV5uhnohK4ClgEmtz_bV7RLP02sI0wnM-hEPt5KVOapVxNyIRnpqrgiGcRZjlBnNYa8aLM04FfiQ3cwufd7JubwI-hCdIP85bJy9yVsyTsaa-noT2kxFzqGI4lNAUYst-Wt5iYaIFdB3IjsoocGdtZqxZKozHGnVWv3hy9vpv1JhFnfy3ZHKHT-rlijamNIxfd9SbEAXWZ4tnJCEgQPk0GEsK1Ppo6I"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-container-padding">
|
||||||
|
<span class="inline-block bg-tertiary-fixed text-on-tertiary-fixed text-label-md px-2 py-1 rounded mb-stack-sm">Full Solution</span>
|
||||||
|
<h3 class="font-title-sm text-title-sm mb-2">프리미엄 (Premium)</h3>
|
||||||
|
<p class="text-on-surface-variant font-body-sm mb-4">AI 최적화 동선 설계 및 맞춤형 브랜딩 패키지가 포함된 올인원 솔루션입니다. 최고의 비즈니스 성과를 보장합니다.</p>
|
||||||
|
<div class="flex items-center justify-between mt-auto pt-4 border-t border-outline-variant/30">
|
||||||
|
<span class="text-tertiary-fixed-dim font-bold">별도 문의</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Inquiry Form Section -->
|
||||||
|
<section class="py-section-padding bg-surface-container-low">
|
||||||
|
<div class="max-w-[1280px] mx-auto px-gutter grid grid-cols-1 lg:grid-cols-12 gap-section-padding">
|
||||||
|
<!-- Left Info Column -->
|
||||||
|
<div class="lg:col-span-5 space-y-stack-lg">
|
||||||
|
<div>
|
||||||
|
<h2 class="font-headline-md text-headline-md mb-stack-sm">문의하기</h2>
|
||||||
|
<p class="text-on-surface-variant">참가 신청 및 전시와 관련된 모든 궁금한 점을 남겨주세요. 담당자가 영업일 기준 24시간 이내에 답변해 드립니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-stack-md bg-surface-container-lowest p-container-padding rounded-xl border border-outline-variant/50">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
|
||||||
|
<span class="material-symbols-outlined">call</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-on-surface-variant">전화 문의</p>
|
||||||
|
<p class="font-title-sm">+82-31-123-4567</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
|
||||||
|
<span class="material-symbols-outlined">mail</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-on-surface-variant">이메일 문의</p>
|
||||||
|
<p class="font-title-sm">exhibit@kintex-ai.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
|
||||||
|
<span class="material-symbols-outlined">location_on</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-label-md text-on-surface-variant">위치 안내</p>
|
||||||
|
<p class="font-title-sm">경기도 고양시 일산서구 킨텍스로 217-60</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-container-padding bg-primary/5 rounded-xl border border-primary/20">
|
||||||
|
<p class="font-body-sm text-primary mb-2">이미 계정이 있으신가요?</p>
|
||||||
|
<a class="font-title-sm text-primary hover:underline flex items-center gap-1" href="#">
|
||||||
|
로그인하여 빠른 문의하기
|
||||||
|
<span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Right Form Column -->
|
||||||
|
<div class="lg:col-span-7">
|
||||||
|
<form class="bg-surface-container-lowest p-8 md:p-12 rounded-2xl border border-outline-variant shadow-lg space-y-6">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-lg">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="font-label-md text-on-surface-variant">회사명</label>
|
||||||
|
<input class="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-bright focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all" placeholder="회사명을 입력하세요" type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="font-label-md text-on-surface-variant">담당자</label>
|
||||||
|
<input class="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-bright focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all" placeholder="성함을 입력하세요" type="text"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="font-label-md text-on-surface-variant">연락처 (이메일 또는 전화번호)</label>
|
||||||
|
<input class="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-bright focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all" placeholder="연락 가능한 정보를 입력하세요" type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-lg">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="font-label-md text-on-surface-variant">예상 규모</label>
|
||||||
|
<select class="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-bright focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all appearance-none cursor-pointer">
|
||||||
|
<option value="">선택하세요</option>
|
||||||
|
<option value="1">1개 부스 (9sqm)</option>
|
||||||
|
<option value="2-4">2-4개 부스 (18-36sqm)</option>
|
||||||
|
<option value="5-9">5-9개 부스 (45-81sqm)</option>
|
||||||
|
<option value="10+">10개 이상</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="font-label-md text-on-surface-variant">희망 홀</label>
|
||||||
|
<select class="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-bright focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all appearance-none cursor-pointer">
|
||||||
|
<option value="">홀 선택</option>
|
||||||
|
<option value="1">Hall 1</option>
|
||||||
|
<option value="2">Hall 2</option>
|
||||||
|
<option value="3">Hall 3</option>
|
||||||
|
<option value="4">Hall 4</option>
|
||||||
|
<option value="5">Hall 5</option>
|
||||||
|
<option value="6">Hall 6</option>
|
||||||
|
<option value="7">Hall 7</option>
|
||||||
|
<option value="8">Hall 8</option>
|
||||||
|
<option value="9">Hall 9</option>
|
||||||
|
<option value="10">Hall 10</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="font-label-md text-on-surface-variant">문의 내용</label>
|
||||||
|
<textarea class="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-bright focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all resize-none" placeholder="참가 목적이나 특별 요청사항이 있다면 남겨주세요." rows="5"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 pt-2">
|
||||||
|
<input class="w-4 h-4 text-primary rounded border-outline-variant" id="privacy" type="checkbox"/>
|
||||||
|
<label class="text-body-sm text-on-surface-variant" for="privacy">개인정보 수집 및 이용에 동의합니다.</label>
|
||||||
|
</div>
|
||||||
|
<button class="w-full bg-primary text-on-primary font-title-sm py-4 rounded-lg hover:brightness-110 active:scale-[0.98] transition-all flex items-center justify-center gap-2" type="button">
|
||||||
|
문의 보내기
|
||||||
|
<span class="material-symbols-outlined">send</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-surface-container py-section-padding border-t border-outline-variant/30">
|
||||||
|
<div class="max-w-[1280px] mx-auto px-gutter grid grid-cols-1 md:grid-cols-2 gap-stack-lg">
|
||||||
|
<div>
|
||||||
|
<div class="font-title-sm text-title-sm font-bold text-primary mb-stack-sm">KINTEX AI System</div>
|
||||||
|
<p class="text-on-surface-variant font-body-sm max-w-sm mb-stack-lg">전 세계 기업과 방문객을 연결하는 혁신적인 AI 기반 전시 솔루션을 제공합니다.</p>
|
||||||
|
<div class="text-on-surface-variant font-body-sm">
|
||||||
|
© 2024 KINTEX AI System. All Rights Reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-stack-lg">
|
||||||
|
<div class="space-y-stack-sm">
|
||||||
|
<p class="font-label-md text-on-surface">회사 정보</p>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a class="font-body-sm text-on-surface-variant hover:text-primary underline" href="#">회사소개</a></li>
|
||||||
|
<li><a class="font-body-sm text-on-surface-variant hover:text-primary underline" href="#">개인정보처리방침</a></li>
|
||||||
|
<li><a class="font-body-sm text-on-surface-variant hover:text-primary underline" href="#">이용약관</a></li>
|
||||||
|
<li><a class="font-body-sm text-on-surface-variant hover:text-primary underline" href="#">사이트맵</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-stack-sm">
|
||||||
|
<p class="font-label-md text-on-surface">소셜 미디어</p>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<a class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center hover:bg-primary-container transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">language</span>
|
||||||
|
</a>
|
||||||
|
<a class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center hover:bg-primary-container transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">share</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
// Micro-interactions
|
||||||
|
document.querySelectorAll('button').forEach(btn => {
|
||||||
|
btn.addEventListener('click', function(e) {
|
||||||
|
const ripple = document.createElement('span');
|
||||||
|
ripple.classList.add('ripple');
|
||||||
|
this.appendChild(ripple);
|
||||||
|
setTimeout(() => ripple.remove(), 1000);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Form submission simple feedback
|
||||||
|
const submitBtn = document.querySelector('button[type="button"]');
|
||||||
|
if(submitBtn) {
|
||||||
|
submitBtn.addEventListener('click', () => {
|
||||||
|
const originalContent = submitBtn.innerHTML;
|
||||||
|
submitBtn.innerHTML = '<span class="material-symbols-outlined animate-spin">sync</span> 보내는 중...';
|
||||||
|
setTimeout(() => {
|
||||||
|
submitBtn.innerHTML = '<span class="material-symbols-outlined">check_circle</span> 전송 완료';
|
||||||
|
submitBtn.classList.replace('bg-primary', 'bg-on-tertiary-fixed-variant');
|
||||||
|
setTimeout(() => {
|
||||||
|
submitBtn.innerHTML = originalContent;
|
||||||
|
submitBtn.classList.replace('bg-on-tertiary-fixed-variant', 'bg-primary');
|
||||||
|
}, 3000);
|
||||||
|
}, 1500);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
286
stitch_kintex_ai_system_architect/scr_p7/code.html
Normal file
286
stitch_kintex_ai_system_architect/scr_p7/code.html
Normal file
@ -0,0 +1,286 @@
|
|||||||
|
<!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>
|
||||||
295
stitch_kintex_ai_system_architect/scr_p7/code_manage.html
Normal file
295
stitch_kintex_ai_system_architect/scr_p7/code_manage.html
Normal file
@ -0,0 +1,295 @@
|
|||||||
|
<!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&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"/>
|
||||||
|
<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-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>
|
||||||
Loading…
Reference in New Issue
Block a user