291 lines
17 KiB
HTML
291 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="ko"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=390, user-scalable=no" name="viewport"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=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-variant": "#dbe2f9",
|
|
"on-tertiary-container": "#8ef7c3",
|
|
"surface-container": "#e9edff",
|
|
"on-surface": "#141b2c",
|
|
"secondary-container": "#6d4aff",
|
|
"tertiary-fixed-dim": "#72daa9",
|
|
"surface-dim": "#d2daf0",
|
|
"surface-container-low": "#f1f3ff",
|
|
"on-surface-variant": "#414751",
|
|
"on-secondary-fixed-variant": "#4500d8",
|
|
"on-background": "#141b2c",
|
|
"on-tertiary": "#ffffff",
|
|
"on-secondary-container": "#f3edff",
|
|
"on-primary-container": "#d2e3ff",
|
|
"on-error-container": "#93000a",
|
|
"inverse-primary": "#a2c9ff",
|
|
"outline-variant": "#c1c7d3",
|
|
"primary-fixed": "#d3e4ff",
|
|
"surface-container-highest": "#dbe2f9",
|
|
"on-primary": "#ffffff",
|
|
"secondary-fixed-dim": "#c9bfff",
|
|
"surface-bright": "#f9f9ff",
|
|
"on-secondary": "#ffffff",
|
|
"surface": "#f9f9ff",
|
|
"on-primary-fixed": "#001c38",
|
|
"on-secondary-fixed": "#1b0063",
|
|
"outline": "#717782",
|
|
"error-container": "#ffdad6",
|
|
"primary-fixed-dim": "#a2c9ff",
|
|
"on-error": "#ffffff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-container-high": "#e0e8ff",
|
|
"surface-tint": "#0060a9",
|
|
"secondary": "#5427e6",
|
|
"tertiary-fixed": "#8ef7c4",
|
|
"tertiary-container": "#00734e",
|
|
"secondary-fixed": "#e5deff",
|
|
"inverse-surface": "#293041",
|
|
"tertiary": "#00583b",
|
|
"primary": "#004e8b",
|
|
"on-tertiary-fixed": "#002113",
|
|
"on-tertiary-fixed-variant": "#005236",
|
|
"on-primary-fixed-variant": "#004881",
|
|
"error": "#ba1a1a",
|
|
"primary-container": "#0066b3",
|
|
"background": "#f9f9ff",
|
|
"inverse-on-surface": "#edf0ff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"stack-sm": "8px",
|
|
"stack-md": "16px",
|
|
"container-padding": "24px",
|
|
"base": "4px",
|
|
"gutter": "16px",
|
|
"stack-lg": "24px"
|
|
},
|
|
"fontFamily": {
|
|
"body-base": ["Inter"],
|
|
"label-xs": ["Geist"],
|
|
"headline-md": ["Inter"],
|
|
"display-lg": ["Inter"],
|
|
"title-sm": ["Inter"],
|
|
"display-lg-mobile": ["Inter"],
|
|
"label-md": ["Geist"],
|
|
"body-sm": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body { width: 390px; margin: 0 auto; min-height: 100vh; background-color: #f9f9ff; overflow-x: hidden; }
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
.ai-glow { box-shadow: 0 0 15px rgba(109, 74, 255, 0.15); }
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-body-base text-on-surface">
|
|
<!-- TopAppBar -->
|
|
<header class="fixed top-0 w-[390px] z-50 bg-surface dark:bg-surface-dim border-b border-outline-variant dark:border-outline flex items-center justify-between px-container-padding h-16">
|
|
<button class="flex items-center justify-center w-10 h-10 hover:bg-surface-container-high transition-colors active:opacity-80 rounded-full">
|
|
<span class="material-symbols-outlined text-primary dark:text-primary-fixed-dim" data-icon="menu">menu</span>
|
|
</button>
|
|
<h1 class="font-headline-md text-headline-md-mobile font-bold text-on-surface dark:text-on-surface-variant">Schedule</h1>
|
|
<button class="flex items-center justify-center w-10 h-10 hover:bg-surface-container-high transition-colors active:opacity-80 rounded-full">
|
|
<span class="material-symbols-outlined text-primary dark:text-primary-fixed-dim" data-icon="notifications">notifications</span>
|
|
</button>
|
|
</header>
|
|
<main class="pt-20 pb-24 px-4 space-y-6">
|
|
<!-- Tab Toggle -->
|
|
<nav class="flex p-1 bg-surface-container-low rounded-xl">
|
|
<button class="flex-1 py-2 text-center font-label-md text-label-md bg-white rounded-lg shadow-sm text-primary transition-all">전체 아젠다</button>
|
|
<button class="flex-1 py-2 text-center font-label-md text-label-md text-on-surface-variant hover:text-on-surface transition-all">내 일정</button>
|
|
</nav>
|
|
<!-- AI Recommendation Section -->
|
|
<section class="space-y-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-secondary text-lg" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
|
<h2 class="font-title-sm text-title-sm text-on-surface">AI 추천 세션 ✨</h2>
|
|
</div>
|
|
<div class="flex gap-4 overflow-x-auto no-scrollbar pb-2 -mx-4 px-4">
|
|
<!-- AI Card 1 -->
|
|
<div class="flex-shrink-0 w-[280px] bg-white border border-secondary/20 rounded-xl p-4 ai-glow relative overflow-hidden">
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-secondary"></div>
|
|
<div class="flex justify-between items-start mb-2">
|
|
<span class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-secondary-container text-on-secondary-container text-[11px] font-bold">
|
|
<span class="material-symbols-outlined text-[12px]" style="font-variation-settings: 'FILL' 1;">bolt</span> 98% 매칭
|
|
</span>
|
|
<span class="font-label-md text-label-md text-outline">10:00 - 10:50</span>
|
|
</div>
|
|
<h3 class="font-title-sm text-[16px] text-on-surface mb-2 leading-snug">AI 비즈니스 트랜스포메이션 2026: 미래 전략</h3>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant mb-3">김민수 본부장 · KINTEX IT Lab</p>
|
|
<div class="flex gap-2">
|
|
<span class="px-2 py-0.5 border border-secondary/30 rounded text-[11px] text-secondary font-medium">기술</span>
|
|
<span class="px-2 py-0.5 border border-secondary/30 rounded text-[11px] text-secondary font-medium">전략</span>
|
|
</div>
|
|
</div>
|
|
<!-- AI Card 2 -->
|
|
<div class="flex-shrink-0 w-[280px] bg-white border border-secondary/20 rounded-xl p-4 ai-glow relative overflow-hidden">
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-secondary"></div>
|
|
<div class="flex justify-between items-start mb-2">
|
|
<span class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-secondary-container text-on-secondary-container text-[11px] font-bold">
|
|
<span class="material-symbols-outlined text-[12px]" style="font-variation-settings: 'FILL' 1;">bolt</span> 92% 매칭
|
|
</span>
|
|
<span class="font-label-md text-label-md text-outline">11:00 - 11:50</span>
|
|
</div>
|
|
<h3 class="font-title-sm text-[16px] text-on-surface mb-2 leading-snug">스마트 전시 공간 기획과 AI 도슨트의 결합</h3>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant mb-3">박서연 책임 · 글로벌 마케팅 그룹</p>
|
|
<div class="flex gap-2">
|
|
<span class="px-2 py-0.5 border border-secondary/30 rounded text-[11px] text-secondary font-medium">비즈니스</span>
|
|
<span class="px-2 py-0.5 border border-secondary/30 rounded text-[11px] text-secondary font-medium">디자인</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Agenda List -->
|
|
<section class="space-y-6">
|
|
<!-- Time Slot: 10:00 -->
|
|
<div class="space-y-3">
|
|
<div class="flex items-center gap-3">
|
|
<span class="font-headline-md text-headline-md-mobile text-primary">10:00</span>
|
|
<div class="flex-1 h-px bg-outline-variant"></div>
|
|
</div>
|
|
<div class="bg-white border border-outline-variant rounded-xl p-4 flex gap-4 transition-all hover:bg-surface-container-low active:scale-[0.98]">
|
|
<div class="flex-1">
|
|
<div class="text-primary font-label-md text-label-md mb-1">10:00 - 10:50 | Room A</div>
|
|
<h4 class="font-title-sm text-[17px] text-on-surface mb-2">AI 기반 전시 데이터 분석 및 성과 극대화 솔루션</h4>
|
|
<div class="text-on-surface-variant font-body-sm text-body-sm mb-3">최현우 팀장 · 데이터솔루션 본부</div>
|
|
<div class="flex gap-2">
|
|
<span class="px-2 py-0.5 bg-surface-container-highest text-on-surface-variant rounded text-[11px] font-medium">기술</span>
|
|
<span class="px-2 py-0.5 bg-surface-container-highest text-on-surface-variant rounded text-[11px] font-medium">데이터</span>
|
|
</div>
|
|
</div>
|
|
<button class="self-start text-outline-variant hover:text-primary transition-colors" onclick="this.classList.toggle('text-primary'); this.querySelector('span').innerText = (this.querySelector('span').innerText === 'star' ? 'star_outline' : 'star')">
|
|
<span class="material-symbols-outlined" data-icon="star_outline">star_outline</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Time Slot: 11:00 -->
|
|
<div class="space-y-3">
|
|
<div class="flex items-center gap-3">
|
|
<span class="font-headline-md text-headline-md-mobile text-primary">11:00</span>
|
|
<div class="flex-1 h-px bg-outline-variant"></div>
|
|
</div>
|
|
<div class="bg-white border border-outline-variant rounded-xl p-4 flex gap-4 transition-all hover:bg-surface-container-low active:scale-[0.98]">
|
|
<div class="flex-1">
|
|
<div class="text-primary font-label-md text-label-md mb-1">11:00 - 11:50 | Room B</div>
|
|
<h4 class="font-title-sm text-[17px] text-on-surface mb-2">지속 가능한 전시 문화를 위한 그린테크 혁신</h4>
|
|
<div class="text-on-surface-variant font-body-sm text-body-sm mb-3">이주환 교수 · 서울대학교 환경공학</div>
|
|
<div class="flex gap-2">
|
|
<span class="px-2 py-0.5 bg-surface-container-highest text-on-surface-variant rounded text-[11px] font-medium">ESG</span>
|
|
<span class="px-2 py-0.5 bg-surface-container-highest text-on-surface-variant rounded text-[11px] font-medium">비즈니스</span>
|
|
</div>
|
|
</div>
|
|
<button class="self-start text-outline-variant hover:text-primary transition-colors" onclick="this.classList.toggle('text-primary'); this.querySelector('span').innerText = (this.querySelector('span').innerText === 'star' ? 'star_outline' : 'star')">
|
|
<span class="material-symbols-outlined" data-icon="star_outline">star_outline</span>
|
|
</button>
|
|
</div>
|
|
<div class="bg-white border border-outline-variant rounded-xl p-4 flex gap-4 transition-all hover:bg-surface-container-low active:scale-[0.98] border-l-4 border-l-secondary">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<span class="text-primary font-label-md text-label-md">11:00 - 11:50 | Main Stage</span>
|
|
<span class="flex items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-secondary-container text-on-secondary-container text-[10px] font-bold">
|
|
<span class="material-symbols-outlined text-[10px]" style="font-variation-settings: 'FILL' 1;">bolt</span> AI 추천
|
|
</span>
|
|
</div>
|
|
<h4 class="font-title-sm text-[17px] text-on-surface mb-2">스마트 전시 공간 기획과 AI 도슨트의 결합</h4>
|
|
<div class="text-on-surface-variant font-body-sm text-body-sm mb-3">박서연 책임 · 글로벌 마케팅 그룹</div>
|
|
<div class="flex gap-2">
|
|
<span class="px-2 py-0.5 bg-surface-container-highest text-on-surface-variant rounded text-[11px] font-medium">마케팅</span>
|
|
</div>
|
|
</div>
|
|
<button class="self-start text-outline-variant hover:text-primary transition-colors" onclick="this.classList.toggle('text-primary'); this.querySelector('span').innerText = (this.querySelector('span').innerText === 'star' ? 'star_outline' : 'star')">
|
|
<span class="material-symbols-outlined" data-icon="star_outline">star_outline</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Time Slot: 13:00 -->
|
|
<div class="space-y-3">
|
|
<div class="flex items-center gap-3">
|
|
<span class="font-headline-md text-headline-md-mobile text-primary">13:00</span>
|
|
<div class="flex-1 h-px bg-outline-variant"></div>
|
|
</div>
|
|
<div class="bg-white border border-outline-variant rounded-xl p-4 flex gap-4 transition-all hover:bg-surface-container-low active:scale-[0.98]">
|
|
<div class="flex-1">
|
|
<div class="text-primary font-label-md text-label-md mb-1">13:00 - 13:50 | VIP Lounge</div>
|
|
<h4 class="font-title-sm text-[17px] text-on-surface mb-2">B2B 네트워킹의 기술: 성과를 이끄는 비즈니스 매너</h4>
|
|
<div class="text-on-surface-variant font-body-sm text-body-sm mb-3">Sarah J. Miller · G-Exhibitions CEO</div>
|
|
<div class="flex gap-2">
|
|
<span class="px-2 py-0.5 bg-surface-container-highest text-on-surface-variant rounded text-[11px] font-medium">네트워킹</span>
|
|
</div>
|
|
</div>
|
|
<button class="self-start text-outline-variant hover:text-primary transition-colors" onclick="this.classList.toggle('text-primary'); this.querySelector('span').innerText = (this.querySelector('span').innerText === 'star' ? 'star_outline' : 'star')">
|
|
<span class="material-symbols-outlined" data-icon="star_outline">star_outline</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- BottomNavBar -->
|
|
<nav class="fixed bottom-0 left-0 w-[390px] z-50 bg-surface-container dark:bg-surface-container-lowest flex justify-around items-center pt-2 pb-4 px-4 rounded-t-full shadow-[0_-2px_8px_rgba(0,0,0,0.05)]">
|
|
<button class="flex flex-col items-center justify-center text-on-surface-variant dark:text-outline px-4 py-1 hover:bg-surface-variant dark:hover:bg-inverse-surface transition-all active:scale-95 duration-150">
|
|
<span class="material-symbols-outlined" data-icon="home">home</span>
|
|
<span class="font-label-md text-label-md">Home</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center bg-secondary-container dark:bg-secondary text-on-secondary-container dark:text-on-secondary rounded-full px-4 py-1 hover:bg-surface-variant dark:hover:bg-inverse-surface transition-all active:scale-95 duration-150">
|
|
<span class="material-symbols-outlined" data-icon="calendar_today" style="font-variation-settings: 'FILL' 1;">calendar_today</span>
|
|
<span class="font-label-md text-label-md">Schedule</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center text-on-surface-variant dark:text-outline px-4 py-1 hover:bg-surface-variant dark:hover:bg-inverse-surface transition-all active:scale-95 duration-150">
|
|
<span class="material-symbols-outlined" data-icon="business_center">business_center</span>
|
|
<span class="font-label-md text-label-md">Exhibitors</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center text-on-surface-variant dark:text-outline px-4 py-1 hover:bg-surface-variant dark:hover:bg-inverse-surface transition-all active:scale-95 duration-150">
|
|
<span class="material-symbols-outlined" data-icon="person">person</span>
|
|
<span class="font-label-md text-label-md">Profile</span>
|
|
</button>
|
|
</nav>
|
|
<script>
|
|
// Simple micro-interaction for fav buttons already included inline
|
|
document.querySelectorAll('nav button').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
if(btn.closest('nav').classList.contains('bg-surface-container-low')) {
|
|
// This is the tab toggle
|
|
btn.parentNode.querySelectorAll('button').forEach(b => {
|
|
b.classList.remove('bg-white', 'shadow-sm', 'text-primary');
|
|
b.classList.add('text-on-surface-variant');
|
|
});
|
|
btn.classList.add('bg-white', 'shadow-sm', 'text-primary');
|
|
btn.classList.remove('text-on-surface-variant');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |