285 lines
16 KiB
HTML
285 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="ko"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=390, 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": {
|
|
"tertiary": "#00583b",
|
|
"surface-tint": "#0060a9",
|
|
"surface-container-low": "#f1f3ff",
|
|
"outline": "#717782",
|
|
"error": "#ba1a1a",
|
|
"secondary-fixed-dim": "#c9bfff",
|
|
"on-tertiary": "#ffffff",
|
|
"on-surface-variant": "#414751",
|
|
"surface-container": "#e9edff",
|
|
"primary": "#004e8b",
|
|
"on-secondary-fixed": "#1b0063",
|
|
"on-primary": "#ffffff",
|
|
"on-tertiary-fixed": "#002113",
|
|
"on-tertiary-container": "#8ef7c3",
|
|
"primary-container": "#0066b3",
|
|
"on-primary-container": "#d2e3ff",
|
|
"on-secondary-container": "#f3edff",
|
|
"on-secondary-fixed-variant": "#4500d8",
|
|
"surface-container-highest": "#dbe2f9",
|
|
"secondary-fixed": "#e5deff",
|
|
"on-error-container": "#93000a",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-surface": "#141b2c",
|
|
"surface-bright": "#f9f9ff",
|
|
"primary-fixed-dim": "#a2c9ff",
|
|
"on-tertiary-fixed-variant": "#005236",
|
|
"inverse-on-surface": "#edf0ff",
|
|
"surface-dim": "#d2daf0",
|
|
"error-container": "#ffdad6",
|
|
"surface": "#f9f9ff",
|
|
"primary-fixed": "#d3e4ff",
|
|
"on-primary-fixed": "#001c38",
|
|
"on-background": "#141b2c",
|
|
"tertiary-fixed-dim": "#72daa9",
|
|
"tertiary-fixed": "#8ef7c4",
|
|
"surface-container-high": "#e0e8ff",
|
|
"background": "#f9f9ff",
|
|
"on-error": "#ffffff",
|
|
"surface-variant": "#dbe2f9",
|
|
"inverse-surface": "#293041",
|
|
"outline-variant": "#c1c7d3",
|
|
"on-secondary": "#ffffff",
|
|
"secondary": "#5427e6",
|
|
"secondary-container": "#6d4aff",
|
|
"tertiary-container": "#00734e",
|
|
"on-primary-fixed-variant": "#004881",
|
|
"inverse-primary": "#a2c9ff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"stack-lg": "24px",
|
|
"stack-md": "16px",
|
|
"stack-sm": "8px",
|
|
"container-padding": "24px",
|
|
"base": "4px",
|
|
"gutter": "16px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-md": ["Inter"],
|
|
"body-sm": ["Inter"],
|
|
"body-base": ["Inter"],
|
|
"label-xs": ["Geist"],
|
|
"title-sm": ["Inter"],
|
|
"label-md": ["Geist"],
|
|
"display-lg-mobile": ["Inter"],
|
|
"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"}],
|
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
|
"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"}],
|
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body { width: 390px; margin: 0 auto; overflow-x: hidden; background-color: #f9f9ff; }
|
|
.match-card-stack { perspective: 1000px; position: relative; height: 380px; }
|
|
.match-card { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s; }
|
|
.match-card:nth-child(1) { z-index: 3; transform: translateY(0) scale(1); }
|
|
.match-card:nth-child(2) { z-index: 2; transform: translateY(12px) scale(0.95); opacity: 0.8; }
|
|
.match-card:nth-child(3) { z-index: 1; transform: translateY(24px) scale(0.9); opacity: 0.5; }
|
|
.custom-scroll::-webkit-scrollbar { display: none; }
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-body-base text-on-surface">
|
|
<!-- Top Navigation Bar -->
|
|
<header class="fixed top-0 left-0 w-full z-50 flex items-center justify-between px-container-padding h-16 bg-surface border-b border-outline-variant">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary">menu</span>
|
|
<h1 class="font-headline-md text-headline-md-mobile font-bold text-primary">KINTEX Matchmaking</h1>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant">search</span>
|
|
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">account_circle</span>
|
|
</div>
|
|
</header>
|
|
<main class="pt-20 pb-24 px-container-padding space-y-stack-lg">
|
|
<!-- AI Recommendations Section -->
|
|
<section class="space-y-stack-md">
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="font-title-sm text-title-sm text-on-surface flex items-center gap-1">
|
|
AI 추천 매칭
|
|
<span class="material-symbols-outlined text-secondary text-sm" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
|
</h2>
|
|
<button class="text-label-md font-label-md text-primary">모두 보기</button>
|
|
</div>
|
|
<div class="match-card-stack">
|
|
<!-- Card 1 -->
|
|
<div class="match-card absolute inset-0 bg-white border border-outline-variant rounded-xl p-stack-md flex flex-col justify-between">
|
|
<div class="flex gap-stack-md">
|
|
<div class="w-20 h-20 rounded-lg bg-surface-container overflow-hidden shrink-0">
|
|
<img class="w-full h-full object-cover" data-alt="A professional headshot of a Korean business executive in a modern office setting. High-quality corporate photography, soft natural lighting, and a shallow depth of field. The person has a friendly but professional expression, wearing a smart casual blazer. KINTEX blue accents in the background blurred." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBb-k7rk8p0jjsQlkg9HngJi3Nmf4DYiOaD5G70H_hQAK-4VhsyuAtP_COKbiU6oVqzB0dGLOoloFkblif-vlri5KIV7o7kGkph7JfI0JxUcXTAs5Z6QRRsQic1KsomNgD0FQZGq2n8_sMlknTj9iVK5hO5cY4dQhLn-Y24D1fnimvr19Zze5tDwBFrf1lVRLih1NXXjpXpulPyLmZzWPgYXIQzxX_B6SqdTlmYqdjOGgjBSdYWlVjboqYf2wI11dOwvq2PkjZSvbM"/>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border border-secondary text-secondary font-label-md text-label-xs mb-1">
|
|
<span class="material-symbols-outlined text-xs" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
|
AI 매칭 92%
|
|
</div>
|
|
<h3 class="font-title-sm text-on-surface">김민수</h3>
|
|
<p class="text-body-sm text-on-surface-variant">(주)테크솔루션 | CTO</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-stack-md flex flex-wrap gap-2">
|
|
<span class="bg-surface-container-low text-on-surface-variant px-3 py-1 rounded-full text-label-md font-label-md">AI 솔루션</span>
|
|
<span class="bg-surface-container-low text-on-surface-variant px-3 py-1 rounded-full text-label-md font-label-md">스마트 팩토리</span>
|
|
<span class="bg-surface-container-low text-on-surface-variant px-3 py-1 rounded-full text-label-md font-label-md">클라우드</span>
|
|
</div>
|
|
<div class="mt-stack-md grid grid-cols-2 gap-stack-md">
|
|
<button class="w-full py-2.5 rounded-lg border border-outline text-on-surface-variant font-label-md hover:bg-surface-container-low transition-colors active:scale-95">패스</button>
|
|
<button class="w-full py-2.5 rounded-lg bg-primary text-on-primary font-label-md hover:bg-primary-container transition-colors active:scale-95">관심있음</button>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2 (Hint) -->
|
|
<div class="match-card absolute inset-0 bg-white border border-outline-variant rounded-xl p-stack-md"></div>
|
|
</div>
|
|
</section>
|
|
<!-- Meeting Calendar Section -->
|
|
<section class="space-y-stack-md">
|
|
<h2 class="font-title-sm text-title-sm text-on-surface">미팅 예약</h2>
|
|
<div class="flex gap-3 overflow-x-auto custom-scroll pb-1">
|
|
<button class="flex-col min-w-[72px] h-20 flex items-center justify-center bg-primary text-on-primary rounded-xl">
|
|
<span class="font-label-md text-label-md opacity-80">오늘</span>
|
|
<span class="font-title-sm text-title-sm">24</span>
|
|
</button>
|
|
<button class="flex-col min-w-[72px] h-20 flex items-center justify-center bg-white border border-outline-variant text-on-surface-variant rounded-xl">
|
|
<span class="font-label-md text-label-md opacity-80">내일</span>
|
|
<span class="font-title-sm text-title-sm">25</span>
|
|
</button>
|
|
<button class="flex-col min-w-[72px] h-20 flex items-center justify-center bg-white border border-outline-variant text-on-surface-variant rounded-xl">
|
|
<span class="font-label-md text-label-md opacity-80">금</span>
|
|
<span class="font-title-sm text-title-sm">26</span>
|
|
</button>
|
|
<button class="flex-col min-w-[72px] h-20 flex items-center justify-center bg-white border border-outline-variant text-on-surface-variant rounded-xl">
|
|
<span class="font-label-md text-label-md opacity-80">토</span>
|
|
<span class="font-title-sm text-title-sm">27</span>
|
|
</button>
|
|
<button class="flex-col min-w-[72px] h-20 flex items-center justify-center bg-white border border-outline-variant text-on-surface-variant rounded-xl">
|
|
<span class="font-label-md text-label-md opacity-80">일</span>
|
|
<span class="font-title-sm text-title-sm">28</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex gap-2 overflow-x-auto custom-scroll mt-2">
|
|
<span class="px-4 py-2 rounded-full bg-white border border-outline-variant text-body-sm whitespace-nowrap active:bg-primary-fixed">10:00</span>
|
|
<span class="px-4 py-2 rounded-full bg-primary-container text-on-primary-container text-body-sm whitespace-nowrap">11:00</span>
|
|
<span class="px-4 py-2 rounded-full bg-white border border-outline-variant text-body-sm whitespace-nowrap">12:00</span>
|
|
<span class="px-4 py-2 rounded-full bg-white border border-outline-variant text-body-sm whitespace-nowrap">13:00</span>
|
|
<span class="px-4 py-2 rounded-full bg-white border border-outline-variant text-body-sm whitespace-nowrap">14:00</span>
|
|
<span class="px-4 py-2 rounded-full bg-white border border-outline-variant text-body-sm whitespace-nowrap">15:00</span>
|
|
</div>
|
|
</section>
|
|
<!-- My Meetings List Section -->
|
|
<section class="space-y-stack-md">
|
|
<h2 class="font-title-sm text-title-sm text-on-surface">내 미팅 일정</h2>
|
|
<div class="space-y-stack-sm">
|
|
<!-- Meeting Item 1 -->
|
|
<div class="bg-white p-stack-md border border-outline-variant rounded-xl flex flex-col gap-2 relative overflow-hidden">
|
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-primary"></div>
|
|
<div class="flex justify-between items-start">
|
|
<div class="flex flex-col">
|
|
<span class="text-label-md font-label-md text-primary">14:00 - 14:30</span>
|
|
<h4 class="font-title-sm text-on-surface mt-1">이영희 대표</h4>
|
|
<p class="text-body-sm text-on-surface-variant">글로벌 리서치 그룹</p>
|
|
</div>
|
|
<div class="bg-tertiary-container text-on-tertiary-container px-2 py-0.5 rounded text-label-xs font-label-md">확정</div>
|
|
</div>
|
|
<div class="flex justify-between items-center mt-2 pt-2 border-t border-outline-variant/30">
|
|
<div class="flex items-center gap-1 text-on-surface-variant text-body-sm">
|
|
<span class="material-symbols-outlined text-sm">location_on</span>
|
|
1홀 B-102 부스
|
|
</div>
|
|
<button class="flex items-center gap-1 text-surface-tint font-label-md text-label-md">
|
|
<span class="material-symbols-outlined text-base">directions</span>
|
|
길안내
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Meeting Item 2 -->
|
|
<div class="bg-white p-stack-md border border-outline-variant rounded-xl flex flex-col gap-2 relative overflow-hidden">
|
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-secondary-container"></div>
|
|
<div class="flex justify-between items-start">
|
|
<div class="flex flex-col">
|
|
<span class="text-label-md font-label-md text-primary">16:00 - 16:30</span>
|
|
<h4 class="font-title-sm text-on-surface mt-1">박성진 팀장</h4>
|
|
<p class="text-body-sm text-on-surface-variant">미래 로보틱스</p>
|
|
</div>
|
|
<div class="bg-surface-container-highest text-on-surface-variant px-2 py-0.5 rounded text-label-xs font-label-md">승인 대기</div>
|
|
</div>
|
|
<div class="flex justify-between items-center mt-2 pt-2 border-t border-outline-variant/30">
|
|
<div class="flex items-center gap-1 text-on-surface-variant text-body-sm">
|
|
<span class="material-symbols-outlined text-sm">meeting_room</span>
|
|
미팅룸 A-04
|
|
</div>
|
|
<button class="flex items-center gap-1 text-surface-tint font-label-md text-label-md">
|
|
<span class="material-symbols-outlined text-base">directions</span>
|
|
길안내
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Bottom Navigation Bar -->
|
|
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-gutter py-2 bg-surface border-t border-outline-variant">
|
|
<a class="flex flex-col items-center justify-center text-on-surface-variant px-4 py-1 hover:bg-surface-container-low transition-colors active:scale-95" href="#">
|
|
<span class="material-symbols-outlined">explore</span>
|
|
<span class="font-label-md text-label-md">Discover</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center bg-primary-container text-on-primary-container rounded-full px-4 py-1 active:scale-95 transition-transform" href="#">
|
|
<span class="material-symbols-outlined">event_upcoming</span>
|
|
<span class="font-label-md text-label-md">Meetings</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-on-surface-variant px-4 py-1 hover:bg-surface-container-low transition-colors active:scale-95" href="#">
|
|
<span class="material-symbols-outlined">storefront</span>
|
|
<span class="font-label-md text-label-md">Exhibits</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-on-surface-variant px-4 py-1 hover:bg-surface-container-low transition-colors active:scale-95" href="#">
|
|
<span class="material-symbols-outlined">person</span>
|
|
<span class="font-label-md text-label-md">My Profile</span>
|
|
</a>
|
|
</nav>
|
|
<!-- Floating Action Button for AI Matchmaking -->
|
|
<button class="fixed bottom-24 right-container-padding w-14 h-14 bg-secondary-container text-white rounded-full flex items-center justify-center shadow-lg active:scale-95 transition-transform">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
|
</button>
|
|
<script>
|
|
// Simple Micro-interaction for Card Stack
|
|
const cards = document.querySelectorAll('.match-card');
|
|
let currentCardIndex = 0;
|
|
|
|
// Visual simulation of card swipe/switch could be added here
|
|
// For now just providing the static professional design as requested
|
|
</script>
|
|
</body></html> |