411 lines
22 KiB
HTML
411 lines
22 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 전시관리 - Admin Console</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-dim": "#d2daf0",
|
||
"surface-bright": "#f9f9ff",
|
||
"on-secondary-fixed-variant": "#4500d8",
|
||
"outline-variant": "#c1c7d3",
|
||
"secondary": "#5427e6",
|
||
"tertiary-container": "#00734e",
|
||
"error": "#ba1a1a",
|
||
"tertiary-fixed-dim": "#72daa9",
|
||
"surface-tint": "#0060a9",
|
||
"on-tertiary": "#ffffff",
|
||
"surface-container-lowest": "#ffffff",
|
||
"secondary-fixed": "#e5deff",
|
||
"secondary-container": "#6d4aff",
|
||
"tertiary-fixed": "#8ef7c4",
|
||
"on-tertiary-container": "#8ef7c3",
|
||
"on-secondary-fixed": "#1b0063",
|
||
"surface-variant": "#dbe2f9",
|
||
"on-surface-variant": "#414751",
|
||
"error-container": "#ffdad6",
|
||
"surface": "#f9f9ff",
|
||
"inverse-on-surface": "#edf0ff",
|
||
"on-secondary-container": "#f3edff",
|
||
"inverse-primary": "#a2c9ff",
|
||
"primary-fixed": "#d3e4ff",
|
||
"on-secondary": "#ffffff",
|
||
"on-primary-fixed-variant": "#004881",
|
||
"tertiary": "#00583b",
|
||
"surface-container": "#e9edff",
|
||
"on-background": "#141b2c",
|
||
"outline": "#717782",
|
||
"primary-fixed-dim": "#a2c9ff",
|
||
"on-primary": "#ffffff",
|
||
"on-error": "#ffffff",
|
||
"inverse-surface": "#293041",
|
||
"surface-container-highest": "#dbe2f9",
|
||
"on-error-container": "#93000a",
|
||
"on-primary-fixed": "#001c38",
|
||
"secondary-fixed-dim": "#c9bfff",
|
||
"on-tertiary-fixed-variant": "#005236",
|
||
"primary-container": "#0066b3",
|
||
"on-primary-container": "#d2e3ff",
|
||
"surface-container-high": "#e0e8ff",
|
||
"on-tertiary-fixed": "#002113",
|
||
"surface-container-low": "#f1f3ff",
|
||
"on-surface": "#141b2c",
|
||
"background": "#f9f9ff",
|
||
"primary": "#004e8b"
|
||
},
|
||
"borderRadius": {
|
||
"DEFAULT": "0.125rem",
|
||
"lg": "0.25rem",
|
||
"xl": "0.5rem",
|
||
"full": "0.75rem"
|
||
},
|
||
"spacing": {
|
||
"container-padding": "24px",
|
||
"gutter": "16px",
|
||
"base": "4px",
|
||
"stack-sm": "8px",
|
||
"stack-lg": "24px",
|
||
"stack-md": "16px"
|
||
},
|
||
"fontFamily": {
|
||
"title-sm": ["Inter", "sans-serif"],
|
||
"body-base": ["Inter", "sans-serif"],
|
||
"display-lg": ["Inter", "sans-serif"],
|
||
"label-xs": ["Geist", "sans-serif"],
|
||
"headline-md": ["Inter", "sans-serif"],
|
||
"label-md": ["Geist", "sans-serif"],
|
||
"body-sm": ["Inter", "sans-serif"]
|
||
},
|
||
"fontSize": {
|
||
"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-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
||
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}]
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style>
|
||
body { font-family: 'Inter', 'Geist', sans-serif; -webkit-font-smoothing: antialiased; }
|
||
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
||
.data-table-row:hover { background-color: rgba(0, 78, 139, 0.04); }
|
||
.tabular-nums { font-variant-numeric: tabular-nums; }
|
||
</style>
|
||
</head>
|
||
<body class="bg-background text-on-surface selection:bg-primary-container selection:text-on-primary-container overflow-hidden">
|
||
<!-- Layout Wrapper -->
|
||
<div class="flex h-screen w-full">
|
||
<!-- SideNavBar Component -->
|
||
<aside class="h-screen w-64 fixed left-0 top-0 flex flex-col py-stack-lg bg-surface-container border-r border-outline-variant z-50">
|
||
<!-- Header Identity -->
|
||
<div class="px-6 mb-10">
|
||
<img alt="KINTEX Logo" class="w-full h-auto object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuACOlgRWpvKtAU8JIRpD32Gfw6zSBSSPoTfVonAGYK47s3O7dwPlqRlk5ZJPYP4kNiXnnFZjbXNMFXWd9UD2fHrbGz8wtid7ekh61qL5EaOawHppJyeFZqp_Ib8ibC5gnci3nEa3xmfHtYGwmBG2dydg_D2FEvRxWYCaZ5VvK2OTFFVOPmAIwXk8rLReAlezuMAMxxeGocedRN4h1GPMINiKKRpvkHVuiYe0HTKe3UiXTVxy_07F2lnrBJXoUP7QnPD_BYWrWV2JX4"/>
|
||
<div class="mt-6">
|
||
<h1 class="font-headline-md text-headline-md text-primary tracking-tight">Admin Console</h1>
|
||
<p class="text-on-surface-variant font-label-md text-label-md opacity-80 uppercase tracking-widest">Exhibition Management</p>
|
||
</div>
|
||
</div>
|
||
<!-- Navigation Links -->
|
||
<nav class="flex-1 space-y-1">
|
||
<div class="group cursor-pointer duration-200 text-primary font-bold bg-surface-container-high border-r-4 border-primary px-6 py-3 flex items-center gap-3">
|
||
<span class="material-symbols-outlined">domain</span>
|
||
<span class="font-label-md text-label-md">홀 마스터</span>
|
||
</div>
|
||
<div class="group cursor-pointer duration-200 text-on-surface-variant hover:bg-surface-container-highest transition-all px-6 py-3 flex items-center gap-3">
|
||
<span class="material-symbols-outlined">payments</span>
|
||
<span class="font-label-md text-label-md">요율표</span>
|
||
</div>
|
||
<div class="group cursor-pointer duration-200 text-on-surface-variant hover:bg-surface-container-highest transition-all px-6 py-3 flex items-center gap-3">
|
||
<span class="material-symbols-outlined">electrical_services</span>
|
||
<span class="font-label-md text-label-md">유틸리티 요금</span>
|
||
</div>
|
||
<div class="group cursor-pointer duration-200 text-on-surface-variant hover:bg-surface-container-highest transition-all px-6 py-3 flex items-center gap-3">
|
||
<span class="material-symbols-outlined">grid_view</span>
|
||
<span class="font-label-md text-label-md">부스 표준</span>
|
||
</div>
|
||
<div class="group cursor-pointer duration-200 text-on-surface-variant hover:bg-surface-container-highest transition-all px-6 py-3 flex items-center gap-3">
|
||
<span class="material-symbols-outlined">database</span>
|
||
<span class="font-label-md text-label-md">등록업체 DB</span>
|
||
</div>
|
||
<div class="group cursor-pointer duration-200 text-on-surface-variant hover:bg-surface-container-highest transition-all px-6 py-3 flex items-center gap-3">
|
||
<span class="material-symbols-outlined">history</span>
|
||
<span class="font-label-md text-label-md">시스템 로그</span>
|
||
</div>
|
||
</nav>
|
||
<!-- Footer Links -->
|
||
<div class="px-6 space-y-1 mt-auto">
|
||
<div class="group cursor-pointer duration-200 text-on-surface-variant hover:bg-surface-container-highest transition-all py-3 flex items-center gap-3">
|
||
<span class="material-symbols-outlined">settings</span>
|
||
<span class="font-label-md text-label-md">Settings</span>
|
||
</div>
|
||
<div class="group cursor-pointer duration-200 text-on-surface-variant hover:bg-surface-container-highest transition-all py-3 flex items-center gap-3">
|
||
<span class="material-symbols-outlined">logout</span>
|
||
<span class="font-label-md text-label-md">Logout</span>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
<!-- Main Content Area -->
|
||
<main class="ml-64 flex-1 flex flex-col h-full bg-background overflow-hidden">
|
||
<!-- TopNavBar Component -->
|
||
<header class="flex items-center justify-between px-container-padding sticky top-0 z-40 bg-surface w-full h-16 border-b border-outline-variant">
|
||
<div class="flex items-center gap-4">
|
||
<span class="material-symbols-outlined text-primary cursor-pointer">menu</span>
|
||
<h2 class="font-title-sm text-title-sm text-primary">KINTEX AI 전시관리</h2>
|
||
</div>
|
||
<div class="flex items-center gap-gutter">
|
||
<div class="relative">
|
||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-sm">search</span>
|
||
<input class="pl-10 pr-4 py-1.5 bg-surface-container-low border border-outline-variant rounded-full text-sm w-64 focus:ring-1 focus:ring-primary focus:border-primary outline-none transition-all" placeholder="통합 검색..." type="text"/>
|
||
</div>
|
||
<div class="flex items-center gap-4 border-l border-outline-variant pl-4">
|
||
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-colors">notifications</span>
|
||
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-colors">settings</span>
|
||
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-colors">help</span>
|
||
<div class="w-8 h-8 rounded-full bg-primary-fixed flex items-center justify-center cursor-pointer">
|
||
<span class="material-symbols-outlined text-on-primary-fixed text-lg">person</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- Scrollable Content -->
|
||
<div class="flex-1 overflow-y-auto p-container-padding">
|
||
<!-- Breadcrumb -->
|
||
<nav class="flex items-center gap-2 mb-stack-lg text-body-sm text-on-surface-variant">
|
||
<span>마스터데이터 관리</span>
|
||
<span class="material-symbols-outlined text-sm">chevron_right</span>
|
||
<span class="text-primary font-bold">홀 마스터</span>
|
||
</nav>
|
||
<!-- Page Header & Action -->
|
||
<div class="flex justify-between items-end mb-6">
|
||
<div>
|
||
<h3 class="font-display-lg text-display-lg text-on-background mb-2">홀 마스터 관리</h3>
|
||
<p class="text-on-surface-variant text-body-base">전시장 홀 정보 및 물리적 규격 마스터 데이터를 관리합니다.</p>
|
||
</div>
|
||
<div class="flex gap-stack-sm">
|
||
<button class="flex items-center gap-2 px-4 py-2 border border-primary text-primary hover:bg-primary-container/10 transition-colors rounded-lg font-medium text-sm">
|
||
<span class="material-symbols-outlined text-sm">download</span>
|
||
엑셀 내보내기
|
||
</button>
|
||
<button class="flex items-center gap-2 px-4 py-2 bg-primary text-on-primary hover:opacity-90 transition-opacity rounded-lg font-medium text-sm">
|
||
<span class="material-symbols-outlined text-sm">add</span>
|
||
새 전시홀 등록
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Tabs -->
|
||
<div class="flex border-b border-outline-variant mb-stack-lg gap-8 overflow-x-auto">
|
||
<button class="pb-3 border-b-2 border-primary text-primary font-bold whitespace-nowrap text-sm">홀 마스터</button>
|
||
<button class="pb-3 border-b-2 border-transparent text-on-surface-variant hover:text-primary transition-colors whitespace-nowrap text-sm">요율표</button>
|
||
<button class="pb-3 border-b-2 border-transparent text-on-surface-variant hover:text-primary transition-colors whitespace-nowrap text-sm">유틸리티 요금</button>
|
||
<button class="pb-3 border-b-2 border-transparent text-on-surface-variant hover:text-primary transition-colors whitespace-nowrap text-sm">부스 표준</button>
|
||
<button class="pb-3 border-b-2 border-transparent text-on-surface-variant hover:text-primary transition-colors whitespace-nowrap text-sm">등록업체 DB</button>
|
||
</div>
|
||
<!-- Bento Grid Layout Section -->
|
||
<div class="grid grid-cols-12 gap-gutter items-start">
|
||
<!-- Table Section (Main Body) -->
|
||
<div class="col-span-12 lg:col-span-9 bg-surface-container-lowest border border-outline-variant rounded-xl 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 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">홀</th>
|
||
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider text-right">면적(㎡)</th>
|
||
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">규격(L×W×H)</th>
|
||
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">바닥하중</th>
|
||
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider text-right">부스수(Max)</th>
|
||
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider text-center">관리</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-outline-variant">
|
||
<!-- Row 1 -->
|
||
<tr class="data-table-row transition-colors">
|
||
<td class="px-6 py-4 font-bold text-primary">홀 1</td>
|
||
<td class="px-6 py-4 tabular-nums text-right">10,611㎡</td>
|
||
<td class="px-6 py-4 tabular-nums text-on-surface-variant">126×84×12m</td>
|
||
<td class="px-6 py-4 text-on-surface-variant">5t/㎡</td>
|
||
<td class="px-6 py-4 tabular-nums text-right">480</td>
|
||
<td class="px-6 py-4 flex justify-center gap-2">
|
||
<button class="p-1 hover:bg-primary-container/20 rounded text-primary transition-colors">
|
||
<span class="material-symbols-outlined text-sm">edit</span>
|
||
</button>
|
||
<button class="p-1 hover:bg-error-container/20 rounded text-error transition-colors">
|
||
<span class="material-symbols-outlined text-sm">delete</span>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<!-- Row 2 -->
|
||
<tr class="data-table-row transition-colors">
|
||
<td class="px-6 py-4 font-bold text-primary">홀 2</td>
|
||
<td class="px-6 py-4 tabular-nums text-right">10,611㎡</td>
|
||
<td class="px-6 py-4 tabular-nums text-on-surface-variant">126×84×12m</td>
|
||
<td class="px-6 py-4 text-on-surface-variant">5t/㎡</td>
|
||
<td class="px-6 py-4 tabular-nums text-right">480</td>
|
||
<td class="px-6 py-4 flex justify-center gap-2">
|
||
<button class="p-1 hover:bg-primary-container/20 rounded text-primary transition-colors">
|
||
<span class="material-symbols-outlined text-sm">edit</span>
|
||
</button>
|
||
<button class="p-1 hover:bg-error-container/20 rounded text-error transition-colors">
|
||
<span class="material-symbols-outlined text-sm">delete</span>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<!-- Row 3 -->
|
||
<tr class="data-table-row transition-colors">
|
||
<td class="px-6 py-4 font-bold text-primary">홀 7</td>
|
||
<td class="px-6 py-4 tabular-nums text-right">11,290㎡</td>
|
||
<td class="px-6 py-4 tabular-nums text-on-surface-variant">126×90×12m</td>
|
||
<td class="px-6 py-4 text-on-surface-variant">5t/㎡</td>
|
||
<td class="px-6 py-4 tabular-nums text-right">510</td>
|
||
<td class="px-6 py-4 flex justify-center gap-2">
|
||
<button class="p-1 hover:bg-primary-container/20 rounded text-primary transition-colors">
|
||
<span class="material-symbols-outlined text-sm">edit</span>
|
||
</button>
|
||
<button class="p-1 hover:bg-error-container/20 rounded text-error transition-colors">
|
||
<span class="material-symbols-outlined text-sm">delete</span>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<!-- Row 4 -->
|
||
<tr class="data-table-row transition-colors">
|
||
<td class="px-6 py-4 font-bold text-primary">홀 8</td>
|
||
<td class="px-6 py-4 tabular-nums text-right">11,290㎡</td>
|
||
<td class="px-6 py-4 tabular-nums text-on-surface-variant">126×90×15m</td>
|
||
<td class="px-6 py-4 text-on-surface-variant">5t/㎡</td>
|
||
<td class="px-6 py-4 tabular-nums text-right">510</td>
|
||
<td class="px-6 py-4 flex justify-center gap-2">
|
||
<button class="p-1 hover:bg-primary-container/20 rounded text-primary transition-colors">
|
||
<span class="material-symbols-outlined text-sm">edit</span>
|
||
</button>
|
||
<button class="p-1 hover:bg-error-container/20 rounded text-error transition-colors">
|
||
<span class="material-symbols-outlined text-sm">delete</span>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<!-- Row 5 -->
|
||
<tr class="data-table-row transition-colors">
|
||
<td class="px-6 py-4 font-bold text-primary">홀 10</td>
|
||
<td class="px-6 py-4 tabular-nums text-right">10,000㎡</td>
|
||
<td class="px-6 py-4 tabular-nums text-on-surface-variant">100×100×15m</td>
|
||
<td class="px-6 py-4 text-on-surface-variant">5t/㎡</td>
|
||
<td class="px-6 py-4 tabular-nums text-right">450</td>
|
||
<td class="px-6 py-4 flex justify-center gap-2">
|
||
<button class="p-1 hover:bg-primary-container/20 rounded text-primary transition-colors">
|
||
<span class="material-symbols-outlined text-sm">edit</span>
|
||
</button>
|
||
<button class="p-1 hover:bg-error-container/20 rounded text-error transition-colors">
|
||
<span class="material-symbols-outlined text-sm">delete</span>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- Sidebar Info / Action Cards -->
|
||
<div class="col-span-12 lg:col-span-3 space-y-gutter">
|
||
<!-- AI Insights Card -->
|
||
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-5 border-l-4 border-l-secondary">
|
||
<div class="flex items-center gap-2 text-secondary mb-3">
|
||
<span class="material-symbols-outlined text-xl">auto_awesome</span>
|
||
<span class="font-bold text-sm">AI 최적화 분석</span>
|
||
</div>
|
||
<p class="text-body-sm text-on-surface mb-4">현재 홀 7의 부스 배치 밀도가 다른 전시홀 대비 12% 높습니다. 안전 통로 확보를 위한 시뮬레이션을 권장합니다.</p>
|
||
<button class="w-full py-2 bg-secondary text-on-secondary rounded-lg text-xs font-bold hover:opacity-90 transition-opacity">
|
||
시뮬레이션 실행
|
||
</button>
|
||
</div>
|
||
<!-- CAD Upload Section -->
|
||
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-5 border-l-4 border-l-on-surface-variant">
|
||
<div class="flex justify-between items-start mb-4">
|
||
<div>
|
||
<h4 class="font-bold text-sm mb-1">트렌치 좌표 CAD 업로드</h4>
|
||
<div class="inline-flex items-center gap-1 bg-surface-container-highest px-2 py-0.5 rounded text-[10px] text-on-surface-variant">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-outline"></span>
|
||
미확보 · 킨텍스 협의
|
||
</div>
|
||
</div>
|
||
<span class="material-symbols-outlined text-on-surface-variant opacity-40">upload_file</span>
|
||
</div>
|
||
<p class="text-xs text-on-surface-variant leading-relaxed mb-4">
|
||
홀7, 8 전용 지하 트렌치 정밀 좌표 데이터가 누락되었습니다. 킨텍스 시설팀 협의 후 최신 .dwg 파일을 업로드하십시오.
|
||
</p>
|
||
<div class="border-2 border-dashed border-outline-variant rounded-lg p-6 flex flex-col items-center justify-center cursor-pointer hover:bg-surface-container-low transition-colors group">
|
||
<span class="material-symbols-outlined text-primary mb-2 opacity-60 group-hover:opacity-100">add_circle</span>
|
||
<span class="text-[11px] font-bold text-on-surface-variant uppercase tracking-tighter">Click to upload</span>
|
||
</div>
|
||
</div>
|
||
<!-- Statistics/Status -->
|
||
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-5">
|
||
<h4 class="font-bold text-sm mb-4">홀 이용 현황 요약</h4>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<div class="flex justify-between text-xs mb-1">
|
||
<span class="text-on-surface-variant">전체 홀 가동률</span>
|
||
<span class="font-bold">68%</span>
|
||
</div>
|
||
<div class="w-full h-1.5 bg-surface-container-highest rounded-full overflow-hidden">
|
||
<div class="h-full bg-primary w-[68%]"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between text-xs mb-1">
|
||
<span class="text-on-surface-variant">부스 점유 면적</span>
|
||
<span class="font-bold">42,500㎡</span>
|
||
</div>
|
||
<div class="w-full h-1.5 bg-surface-container-highest rounded-full overflow-hidden">
|
||
<div class="h-full bg-tertiary-container w-[55%]"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Footer / Copyright -->
|
||
<footer class="mt-auto px-container-padding py-4 bg-surface border-t border-outline-variant flex justify-between items-center text-[11px] text-on-surface-variant">
|
||
<div>© 2024 KINTEX AI 전시관리 시스템. All rights reserved.</div>
|
||
<div class="flex gap-4">
|
||
<a class="hover:text-primary underline" href="#">개인정보처리방침</a>
|
||
<a class="hover:text-primary underline" href="#">관리자 매뉴얼</a>
|
||
<span class="tabular-nums">v2.4.1 (Stable Build)</span>
|
||
</div>
|
||
</footer>
|
||
</main>
|
||
</div>
|
||
<!-- Micro-interaction for hover states -->
|
||
<script>
|
||
document.querySelectorAll('.data-table-row').forEach(row => {
|
||
row.addEventListener('mouseenter', () => {
|
||
row.style.transform = 'translateX(4px)';
|
||
row.style.transition = 'transform 0.2s cubic-bezier(0.16, 1, 0.3, 1)';
|
||
});
|
||
row.addEventListener('mouseleave', () => {
|
||
row.style.transform = 'translateX(0)';
|
||
});
|
||
});
|
||
|
||
// Simple tab switching logic for UI demonstration
|
||
const tabs = document.querySelectorAll('.border-b-2');
|
||
tabs.forEach(tab => {
|
||
tab.addEventListener('click', () => {
|
||
tabs.forEach(t => {
|
||
t.classList.remove('border-primary', 'text-primary', 'font-bold');
|
||
t.classList.add('border-transparent', 'text-on-surface-variant');
|
||
});
|
||
tab.classList.add('border-primary', 'text-primary', 'font-bold');
|
||
tab.classList.remove('border-transparent', 'text-on-surface-variant');
|
||
});
|
||
});
|
||
</script>
|
||
</body></html> |