zio
c3a695d70c
- Web core SCR-22/23/25-27/29/30/32-50 (26), admin A5/A6/A8/A9, public P1-P7, mobile M15 - +5 supplementary variants (P4 3-step, P7 manage, M15 ticket-select), 43 files, 0 failures - All delayed generations recovered server-side (project 27 -> 155 screens), no regeneration needed - WORK_STATUS: stitch 64/64 + real-data/2FA track close-out recorded Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
489 lines
29 KiB
HTML
489 lines
29 KiB
HTML
<!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> |