469 lines
24 KiB
HTML
469 lines
24 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&family=Hanken+Grotesk:wght@400;500;600;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"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"surface-container-low": "#f1f3ff",
|
|
"surface-container-highest": "#dbe2f9",
|
|
"outline-variant": "#c1c7d3",
|
|
"background": "#f9f9ff",
|
|
"on-surface": "#141b2c",
|
|
"on-background": "#141b2c",
|
|
"tertiary": "#00583b",
|
|
"primary": "#004e8b",
|
|
"secondary": "#5427e6",
|
|
"outline": "#717782",
|
|
"surface-container-high": "#e0e8ff",
|
|
"secondary-container": "#6d4aff",
|
|
"surface-container": "#e9edff",
|
|
"on-error": "#ffffff",
|
|
"on-tertiary-container": "#8ef7c3",
|
|
"on-secondary-container": "#f3edff",
|
|
"inverse-primary": "#a2c9ff",
|
|
"on-error-container": "#93000a",
|
|
"inverse-on-surface": "#edf0ff",
|
|
"tertiary-fixed": "#8ef7c4",
|
|
"secondary-fixed-dim": "#c9bfff",
|
|
"on-primary-fixed-variant": "#004881",
|
|
"primary-fixed": "#d3e4ff",
|
|
"primary-container": "#0066b3",
|
|
"surface-container-lowest": "#ffffff",
|
|
"secondary-fixed": "#e5deff",
|
|
"on-tertiary-fixed-variant": "#005236",
|
|
"on-secondary": "#ffffff",
|
|
"surface-dim": "#d2daf0",
|
|
"error-container": "#ffdad6",
|
|
"error": "#ba1a1a",
|
|
"surface-tint": "#0060a9",
|
|
"surface-bright": "#f9f9ff",
|
|
"on-surface-variant": "#414751",
|
|
"inverse-surface": "#293041",
|
|
"on-primary-container": "#d2e3ff",
|
|
"on-tertiary-fixed": "#002113",
|
|
"primary-fixed-dim": "#a2c9ff",
|
|
"surface-variant": "#dbe2f9",
|
|
"on-secondary-fixed-variant": "#4500d8",
|
|
"on-secondary-fixed": "#1b0063",
|
|
"on-primary": "#ffffff",
|
|
"tertiary-fixed-dim": "#72daa9",
|
|
"on-tertiary": "#ffffff",
|
|
"tertiary-container": "#00734e",
|
|
"surface": "#f9f9ff",
|
|
"on-primary-fixed": "#001c38"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"stack-md": "16px",
|
|
"gutter": "16px",
|
|
"base": "4px",
|
|
"stack-sm": "8px",
|
|
"stack-lg": "24px",
|
|
"container-padding": "24px"
|
|
},
|
|
"fontFamily": {
|
|
"title-sm": ["Inter", "Hanken Grotesk"],
|
|
"headline-md": ["Inter", "Hanken Grotesk"],
|
|
"body-sm": ["Inter", "Hanken Grotesk"],
|
|
"display-lg": ["Inter", "Hanken Grotesk"],
|
|
"label-xs": ["Geist"],
|
|
"label-md": ["Geist"],
|
|
"body-base": ["Inter", "Hanken Grotesk"]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body { font-family: 'Hanken Grotesk', 'Inter', sans-serif; }
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
.drag-ghost {
|
|
opacity: 0.5;
|
|
background: #e0e8ff !important;
|
|
}
|
|
.tree-line::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -18px;
|
|
top: -10px;
|
|
bottom: 14px;
|
|
width: 1px;
|
|
background: #c1c7d3;
|
|
}
|
|
.tree-line::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: -18px;
|
|
top: 14px;
|
|
width: 12px;
|
|
height: 1px;
|
|
background: #c1c7d3;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background min-h-screen">
|
|
<!-- SideNavBar -->
|
|
<aside class="w-64 h-screen fixed left-0 top-0 bg-surface-container-lowest border-r border-outline-variant flex flex-col py-stack-lg px-gutter z-50">
|
|
<div class="mb-10 px-2">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white">
|
|
<span class="material-symbols-outlined text-sm">smart_toy</span>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-title-sm font-title-sm font-bold text-primary">KINTEX AI 전시관리</h1>
|
|
<p class="text-label-xs text-outline uppercase tracking-wider">Admin Console</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 space-y-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container transition-colors cursor-pointer group" href="#">
|
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
|
<span class="text-body-base font-body-base">대시보드</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container transition-colors cursor-pointer group" href="#">
|
|
<span class="material-symbols-outlined" data-icon="calendar_today">calendar_today</span>
|
|
<span class="text-body-base font-body-base">전시회 일정</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container transition-colors cursor-pointer group" href="#">
|
|
<span class="material-symbols-outlined" data-icon="layers">layers</span>
|
|
<span class="text-body-base font-body-base">부스 배치도</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg bg-surface-container-high text-primary font-semibold cursor-pointer group" href="#">
|
|
<span class="material-symbols-outlined" data-icon="account_tree">account_tree</span>
|
|
<span class="text-body-base font-body-base">메뉴 관리</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container transition-colors cursor-pointer group" href="#">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
<span class="text-body-base font-body-base">시스템 설정</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto border-t border-outline-variant pt-4">
|
|
<button class="flex items-center gap-3 px-4 py-3 w-full rounded-lg text-on-surface-variant hover:bg-surface-container transition-colors cursor-pointer active:opacity-80">
|
|
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
|
<span class="text-body-base font-body-base">로그아웃</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
<!-- TopAppBar -->
|
|
<header class="flex items-center justify-between px-container-padding ml-64 w-[calc(100%-16rem)] h-16 bg-surface-container-lowest border-b border-outline-variant sticky top-0 z-40">
|
|
<div class="flex items-center gap-4">
|
|
<h2 class="font-headline-md text-headline-md font-bold text-primary">메뉴 관리</h2>
|
|
<div class="h-6 w-px bg-outline-variant"></div>
|
|
<nav class="flex items-center gap-4">
|
|
<span class="text-label-md text-primary border-b-2 border-primary py-5 px-1 cursor-pointer">구조 설정</span>
|
|
<span class="text-label-md text-on-surface-variant hover:text-primary transition-colors py-5 px-1 cursor-pointer">권한 매핑</span>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="relative w-72">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-sm">search</span>
|
|
<input class="w-full pl-10 pr-4 py-2 bg-surface-container rounded-full border-none focus:ring-2 focus:ring-primary/20 text-body-sm" placeholder="메뉴 검색..." type="text"/>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors active:scale-95">
|
|
<span class="material-symbols-outlined text-on-surface-variant" data-icon="notifications">notifications</span>
|
|
</button>
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors active:scale-95">
|
|
<span class="material-symbols-outlined text-on-surface-variant" data-icon="help_outline">help_outline</span>
|
|
</button>
|
|
<div class="flex items-center gap-2 ml-2 pl-4 border-l border-outline-variant">
|
|
<div class="w-8 h-8 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container font-bold text-xs">AD</div>
|
|
<span class="text-label-md text-on-surface">Admin</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content -->
|
|
<main class="ml-64 p-stack-lg min-h-[calc(100vh-4rem)]">
|
|
<div class="grid grid-cols-12 gap-gutter h-full items-start">
|
|
<!-- Left Panel: Menu Tree (1/3) -->
|
|
<section class="col-span-4 bg-surface-container-lowest border border-outline-variant rounded-lg p-stack-md flex flex-col h-[calc(100vh-160px)]">
|
|
<div class="flex items-center justify-between mb-stack-md">
|
|
<h3 class="text-title-sm font-title-sm text-on-surface flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary">account_tree</span>
|
|
메뉴 트리
|
|
</h3>
|
|
<button class="text-primary hover:bg-primary/5 px-2 py-1 rounded text-label-md flex items-center gap-1 transition-colors">
|
|
<span class="material-symbols-outlined text-sm">add</span>
|
|
추가
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto pr-2 space-y-2">
|
|
<!-- Menu Item: Dashboard -->
|
|
<div class="flex items-center gap-2 p-3 bg-surface-container-low rounded border border-outline-variant hover:border-primary/50 cursor-move transition-all group">
|
|
<span class="material-symbols-outlined text-outline cursor-grab" data-icon="drag_indicator">drag_indicator</span>
|
|
<span class="material-symbols-outlined text-primary text-xl" data-icon="dashboard">dashboard</span>
|
|
<span class="flex-1 text-body-base">대시보드</span>
|
|
<button class="text-outline hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined text-sm" data-icon="visibility">visibility</span>
|
|
</button>
|
|
</div>
|
|
<!-- Menu Item: Exhibition (With Submenu) -->
|
|
<div>
|
|
<div class="flex items-center gap-2 p-3 bg-surface-container-low rounded border border-outline-variant hover:border-primary/50 cursor-move transition-all group">
|
|
<span class="material-symbols-outlined text-outline cursor-grab">drag_indicator</span>
|
|
<span class="material-symbols-outlined text-primary text-xl">calendar_today</span>
|
|
<span class="flex-1 text-body-base">전시회 일정</span>
|
|
<button class="text-outline hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined text-sm">visibility</span>
|
|
</button>
|
|
</div>
|
|
<div class="ml-10 mt-2 space-y-2">
|
|
<div class="relative flex items-center gap-2 p-2.5 bg-white rounded border border-outline-variant/60 tree-line">
|
|
<span class="material-symbols-outlined text-outline text-lg">event_list</span>
|
|
<span class="flex-1 text-body-sm">진행중인 전시</span>
|
|
</div>
|
|
<div class="relative flex items-center gap-2 p-2.5 bg-white rounded border border-outline-variant/60 tree-line">
|
|
<span class="material-symbols-outlined text-outline text-lg">history</span>
|
|
<span class="flex-1 text-body-sm">과거 이력</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Menu Item: Booth -->
|
|
<div class="flex items-center gap-2 p-3 bg-surface-container-low rounded border border-outline-variant hover:border-primary/50 cursor-move transition-all group">
|
|
<span class="material-symbols-outlined text-outline cursor-grab">drag_indicator</span>
|
|
<span class="material-symbols-outlined text-primary text-xl">layers</span>
|
|
<span class="flex-1 text-body-base">부스 배치도</span>
|
|
<button class="text-outline hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined text-sm">visibility</span>
|
|
</button>
|
|
</div>
|
|
<!-- Menu Item: Menu Mgmt (Active) -->
|
|
<div class="flex items-center gap-2 p-3 bg-primary-container text-on-primary-container rounded border-2 border-primary cursor-move shadow-sm scale-[1.02] ring-4 ring-primary/5">
|
|
<span class="material-symbols-outlined opacity-70 cursor-grab">drag_indicator</span>
|
|
<span class="material-symbols-outlined text-xl">account_tree</span>
|
|
<span class="flex-1 text-body-base font-semibold">메뉴 관리</span>
|
|
<button class="text-on-primary-container">
|
|
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1;">visibility</span>
|
|
</button>
|
|
</div>
|
|
<!-- Menu Item: System -->
|
|
<div class="flex items-center gap-2 p-3 bg-surface-container-low rounded border border-outline-variant hover:border-primary/50 cursor-move transition-all group">
|
|
<span class="material-symbols-outlined text-outline cursor-grab">drag_indicator</span>
|
|
<span class="material-symbols-outlined text-primary text-xl">settings</span>
|
|
<span class="flex-1 text-body-base">시스템 설정</span>
|
|
<button class="text-outline hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined text-sm">visibility</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Right Panel: Property Form (2/3) -->
|
|
<section class="col-span-8 flex flex-col gap-gutter">
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden flex flex-col">
|
|
<div class="px-stack-lg py-stack-md border-b border-outline-variant flex items-center justify-between bg-white">
|
|
<h3 class="text-title-sm font-title-sm text-on-surface flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-secondary">edit_note</span>
|
|
메뉴 상세 설정
|
|
</h3>
|
|
<div class="flex items-center gap-2">
|
|
<span class="bg-surface-container-highest text-primary px-3 py-1 rounded-full text-label-md border border-primary/20">ID: MN-004</span>
|
|
<span class="flex items-center gap-1 text-label-md text-outline">
|
|
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1; color: #6D4AFF;">auto_awesome</span>
|
|
AI 최적화됨
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-stack-lg space-y-8">
|
|
<!-- Basic Info Section -->
|
|
<div class="grid grid-cols-2 gap-stack-lg">
|
|
<div class="space-y-2">
|
|
<label class="text-label-md text-on-surface-variant">메뉴명</label>
|
|
<input class="w-full px-4 py-2.5 rounded border border-outline-variant focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all text-body-base" type="text" value="메뉴 관리"/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-label-md text-on-surface-variant">URL 경로</label>
|
|
<div class="relative">
|
|
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-outline text-body-sm">/admin/</span>
|
|
<input class="w-full pl-20 pr-4 py-2.5 rounded border border-outline-variant focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all text-body-base" type="text" value="menu-management"/>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-label-md text-on-surface-variant">아이콘 선택</label>
|
|
<button class="w-full flex items-center justify-between px-4 py-2.5 rounded border border-outline-variant hover:border-primary transition-all text-body-base bg-white">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-primary" data-icon="account_tree">account_tree</span>
|
|
<span>account_tree</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-outline">expand_more</span>
|
|
</button>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-label-md text-on-surface-variant">노출 순서</label>
|
|
<input class="w-full px-4 py-2.5 rounded border border-outline-variant focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all text-body-base" type="number" value="4"/>
|
|
</div>
|
|
</div>
|
|
<!-- Role-based Permissions -->
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<label class="text-label-md text-on-surface-variant font-bold">역할별 권한 설정</label>
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input class="rounded border-outline-variant text-primary focus:ring-primary w-4 h-4" type="checkbox"/>
|
|
<span class="text-label-md text-outline">전체 선택</span>
|
|
</label>
|
|
</div>
|
|
<div class="grid grid-cols-5 gap-3">
|
|
<!-- Role Checkbox Card -->
|
|
<label class="flex flex-col items-center gap-3 p-4 rounded-lg border-2 border-primary bg-primary-container/10 cursor-pointer transition-all hover:bg-primary-container/20">
|
|
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">admin_panel_settings</span>
|
|
</div>
|
|
<span class="text-label-md font-bold text-primary">관리자</span>
|
|
<input checked="" class="rounded border-outline-variant text-primary focus:ring-primary w-5 h-5" type="checkbox"/>
|
|
</label>
|
|
<label class="flex flex-col items-center gap-3 p-4 rounded-lg border border-outline-variant bg-white cursor-pointer transition-all hover:border-primary/50">
|
|
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center text-outline">
|
|
<span class="material-symbols-outlined">badge</span>
|
|
</div>
|
|
<span class="text-label-md text-on-surface-variant">주최자</span>
|
|
<input class="rounded border-outline-variant text-primary focus:ring-primary w-5 h-5" type="checkbox"/>
|
|
</label>
|
|
<label class="flex flex-col items-center gap-3 p-4 rounded-lg border border-outline-variant bg-white cursor-pointer transition-all hover:border-primary/50">
|
|
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center text-outline">
|
|
<span class="material-symbols-outlined">store</span>
|
|
</div>
|
|
<span class="text-label-md text-on-surface-variant">참가업체</span>
|
|
<input class="rounded border-outline-variant text-primary focus:ring-primary w-5 h-5" type="checkbox"/>
|
|
</label>
|
|
<label class="flex flex-col items-center gap-3 p-4 rounded-lg border border-outline-variant bg-white cursor-pointer transition-all hover:border-primary/50">
|
|
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center text-outline">
|
|
<span class="material-symbols-outlined">construction</span>
|
|
</div>
|
|
<span class="text-label-md text-on-surface-variant">장치업체</span>
|
|
<input class="rounded border-outline-variant text-primary focus:ring-primary w-5 h-5" type="checkbox"/>
|
|
</label>
|
|
<label class="flex flex-col items-center gap-3 p-4 rounded-lg border border-outline-variant bg-white cursor-pointer transition-all hover:border-primary/50">
|
|
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center text-outline">
|
|
<span class="material-symbols-outlined">hail</span>
|
|
</div>
|
|
<span class="text-label-md text-on-surface-variant">홀매니저</span>
|
|
<input class="rounded border-outline-variant text-primary focus:ring-primary w-5 h-5" type="checkbox"/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<!-- Advanced Settings -->
|
|
<div class="p-4 bg-surface-container rounded-lg border border-outline-variant border-dashed">
|
|
<div class="flex items-start gap-4">
|
|
<div class="mt-1">
|
|
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">info</span>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="text-label-md font-bold text-on-surface mb-1">고급 설정</h4>
|
|
<p class="text-body-sm text-on-surface-variant mb-4">해당 메뉴의 노출 정책 및 연동 모듈을 설정합니다. AI가 메뉴 사용 패턴을 분석하여 비활성화 여부를 제안할 수 있습니다.</p>
|
|
<div class="flex gap-6">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input checked="" class="rounded border-outline-variant text-primary focus:ring-primary w-4 h-4" type="checkbox"/>
|
|
<span class="text-body-sm">반응형 레이아웃 적용</span>
|
|
</label>
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input class="rounded border-outline-variant text-primary focus:ring-primary w-4 h-4" type="checkbox"/>
|
|
<span class="text-body-sm">즐겨찾기 허용</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-auto px-stack-lg py-stack-md bg-surface-container-low border-t border-outline-variant flex items-center justify-end gap-3">
|
|
<button class="px-6 py-2.5 rounded border border-outline text-on-surface-variant hover:bg-surface-container transition-all active:scale-95 text-label-md font-bold">
|
|
초기화
|
|
</button>
|
|
<button class="px-8 py-2.5 rounded bg-primary text-white hover:bg-primary/90 shadow-lg shadow-primary/20 transition-all active:scale-95 text-label-md font-bold flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-sm">save</span>
|
|
변경사항 저장
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Usage Insight Card (Sub-content) -->
|
|
<div class="grid grid-cols-2 gap-gutter">
|
|
<div class="bg-white border border-outline-variant p-4 rounded-lg flex items-center gap-4">
|
|
<div class="w-12 h-12 rounded-full bg-secondary-container/10 flex items-center justify-center text-secondary">
|
|
<span class="material-symbols-outlined">trending_up</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-label-xs text-outline">지난 30일 방문수</p>
|
|
<p class="text-title-sm font-bold text-on-surface">1,248회</p>
|
|
<p class="text-[10px] text-tertiary">전월 대비 +12.4% 증가</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white border border-outline-variant p-4 rounded-lg flex items-center gap-4">
|
|
<div class="w-12 h-12 rounded-full bg-primary-container/10 flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined">speed</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-label-xs text-outline">평균 로딩 속도</p>
|
|
<p class="text-title-sm font-bold text-on-surface">0.42s</p>
|
|
<p class="text-[10px] text-tertiary">최적화 상태: 매우 좋음</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<!-- Micro-interactions Script -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Ripple effect for primary button
|
|
const primaryBtn = document.querySelector('.bg-primary');
|
|
primaryBtn.addEventListener('mousedown', (e) => {
|
|
const rect = primaryBtn.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
const ripple = document.createElement('span');
|
|
ripple.style.position = 'absolute';
|
|
ripple.style.width = '100px';
|
|
ripple.style.height = '100px';
|
|
ripple.style.background = 'rgba(255, 255, 255, 0.3)';
|
|
ripple.style.borderRadius = '50%';
|
|
ripple.style.left = `${x - 50}px`;
|
|
ripple.style.top = `${y - 50}px`;
|
|
ripple.style.transform = 'scale(0)';
|
|
ripple.style.transition = 'transform 0.5s ease-out, opacity 0.5s ease-out';
|
|
ripple.style.pointerEvents = 'none';
|
|
|
|
primaryBtn.style.overflow = 'hidden';
|
|
primaryBtn.style.position = 'relative';
|
|
primaryBtn.appendChild(ripple);
|
|
|
|
requestAnimationFrame(() => {
|
|
ripple.style.transform = 'scale(4)';
|
|
ripple.style.opacity = '0';
|
|
});
|
|
|
|
setTimeout(() => ripple.remove(), 500);
|
|
});
|
|
|
|
// Smooth scaling for tree items on hover
|
|
const treeItems = document.querySelectorAll('.bg-surface-container-low');
|
|
treeItems.forEach(item => {
|
|
item.addEventListener('mouseenter', () => {
|
|
if(!item.classList.contains('bg-primary-container')) {
|
|
item.style.transform = 'translateX(4px)';
|
|
}
|
|
});
|
|
item.addEventListener('mouseleave', () => {
|
|
item.style.transform = 'translateX(0)';
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |