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>
443 lines
24 KiB
HTML
443 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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&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"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"tertiary-fixed": "#8ef7c4",
|
|
"on-tertiary-container": "#8ef7c3",
|
|
"surface-container-lowest": "#ffffff",
|
|
"secondary-fixed": "#e5deff",
|
|
"secondary-container": "#6d4aff",
|
|
"surface-variant": "#dbe2f9",
|
|
"on-surface-variant": "#414751",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-fixed": "#1b0063",
|
|
"on-secondary-container": "#f3edff",
|
|
"inverse-primary": "#a2c9ff",
|
|
"inverse-on-surface": "#edf0ff",
|
|
"surface": "#f9f9ff",
|
|
"surface-dim": "#d2daf0",
|
|
"surface-bright": "#f9f9ff",
|
|
"on-secondary-fixed-variant": "#4500d8",
|
|
"tertiary-container": "#00734e",
|
|
"secondary": "#5427e6",
|
|
"outline-variant": "#c1c7d3",
|
|
"tertiary-fixed-dim": "#72daa9",
|
|
"error": "#ba1a1a",
|
|
"surface-tint": "#0060a9",
|
|
"on-tertiary": "#ffffff",
|
|
"on-error-container": "#93000a",
|
|
"surface-container-highest": "#dbe2f9",
|
|
"on-primary": "#ffffff",
|
|
"on-error": "#ffffff",
|
|
"inverse-surface": "#293041",
|
|
"primary-container": "#0066b3",
|
|
"on-primary-container": "#d2e3ff",
|
|
"secondary-fixed-dim": "#c9bfff",
|
|
"on-tertiary-fixed-variant": "#005236",
|
|
"on-primary-fixed": "#001c38",
|
|
"on-surface": "#141b2c",
|
|
"surface-container-low": "#f1f3ff",
|
|
"surface-container-high": "#e0e8ff",
|
|
"on-tertiary-fixed": "#002113",
|
|
"primary": "#004e8b",
|
|
"background": "#f9f9ff",
|
|
"on-secondary": "#ffffff",
|
|
"on-primary-fixed-variant": "#004881",
|
|
"primary-fixed": "#d3e4ff",
|
|
"tertiary": "#00583b",
|
|
"surface-container": "#e9edff",
|
|
"primary-fixed-dim": "#a2c9ff",
|
|
"outline": "#717782",
|
|
"on-background": "#141b2c"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"gutter": "16px",
|
|
"base": "4px",
|
|
"container-padding": "24px",
|
|
"stack-md": "16px",
|
|
"stack-lg": "24px",
|
|
"stack-sm": "8px"
|
|
},
|
|
"fontFamily": {
|
|
"display-lg": ["Inter"],
|
|
"title-sm": ["Inter"],
|
|
"body-base": ["Inter"],
|
|
"label-md": ["Geist"],
|
|
"body-sm": ["Inter"],
|
|
"label-xs": ["Geist"],
|
|
"headline-md": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.form-input-focus:focus {
|
|
outline: none;
|
|
border-color: #0066b3;
|
|
box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.1);
|
|
}
|
|
.switch-input:checked + .switch-slider {
|
|
background-color: #0066b3;
|
|
}
|
|
.switch-input:checked + .switch-slider:before {
|
|
transform: translateX(1.25rem);
|
|
}
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body-base overflow-hidden">
|
|
<!-- Sidebar Navigation -->
|
|
<aside class="fixed left-0 top-0 h-full w-64 bg-surface border-r border-outline-variant flex flex-col py-stack-lg z-50">
|
|
<div class="px-6 mb-10">
|
|
<img alt="KINTEX AI System Logo" class="h-8 w-auto object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDD5aGyo0LgtHc0bBQT2HV96NhrJKignZ66GoODx90BlGkjgcgzPNEAxwMcJmp9Jg4906Tmu3XDPWG7GJyRL7jAHzSGdSEs9sUsmb_P2ELY-MNEjaFXDCC0CGNoiL6Uk2lwU8rk2P2pbritLEa0CjF6QFsLNFcsQ6DN8VZSCVU5ePGHdnKuQMI8N2UZkCAgQYOkKLbzgWMD_OB5tPopOfKnYmhwMrVboYG8_EGRQCvMe1YcXoTResTl3AJQrDxY6V8m-ye0Cby_KR4"/>
|
|
<div class="mt-4">
|
|
<h1 class="font-headline-md text-headline-md font-bold text-primary">KINTEX AI</h1>
|
|
<p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">전시관리</p>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 px-3 space-y-1">
|
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined mr-3">dashboard</span>
|
|
<span class="font-body-base">Dashboard</span>
|
|
</a>
|
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined mr-3">calendar_today</span>
|
|
<span class="font-body-base">Exhibition Schedule</span>
|
|
</a>
|
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined mr-3">domain</span>
|
|
<span class="font-body-base">Hall Operations</span>
|
|
</a>
|
|
<a class="flex items-center px-4 py-3 text-primary font-bold border-r-4 border-primary bg-surface-container-high transition-colors group" href="#">
|
|
<span class="material-symbols-outlined mr-3">settings</span>
|
|
<span class="font-body-base">System Settings</span>
|
|
</a>
|
|
</nav>
|
|
<div class="px-6 mt-auto">
|
|
<div class="p-4 bg-surface-container-low rounded-xl border border-outline-variant">
|
|
<div class="flex items-center mb-2">
|
|
<span class="material-symbols-outlined text-secondary mr-2" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
|
<span class="font-label-md text-secondary">AI Status</span>
|
|
</div>
|
|
<div class="text-xs text-on-surface-variant">System Optimal</div>
|
|
<div class="w-full bg-outline-variant h-1 mt-2 rounded-full overflow-hidden">
|
|
<div class="bg-secondary h-full w-[88%]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Top Navigation Bar -->
|
|
<header class="fixed top-0 left-64 right-0 h-16 bg-surface border-b border-outline-variant flex justify-between items-center px-container-padding z-40">
|
|
<div class="flex items-center space-x-6">
|
|
<h2 class="font-title-sm text-title-sm text-on-surface font-extrabold">KINTEX AI 전시관리</h2>
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">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-container outline-none transition-all" placeholder="설정 검색..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high rounded-full transition-colors relative">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full border-2 border-surface"></span>
|
|
</button>
|
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high rounded-full transition-colors">
|
|
<span class="material-symbols-outlined">help_outline</span>
|
|
</button>
|
|
<div class="h-8 w-[1px] bg-outline-variant mx-2"></div>
|
|
<div class="flex items-center space-x-3 pl-2">
|
|
<div class="text-right">
|
|
<p class="font-label-md text-on-surface leading-tight">Admin User</p>
|
|
<p class="font-label-xs text-on-surface-variant">System Manager</p>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-full bg-primary-fixed flex items-center justify-center border border-primary-container">
|
|
<span class="material-symbols-outlined text-primary">person</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Canvas -->
|
|
<main class="ml-64 mt-16 p-container-padding h-[calc(100vh-4rem)] overflow-y-auto">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="mb-stack-lg">
|
|
<h3 class="font-display-lg text-display-lg text-on-surface">System Settings</h3>
|
|
<p class="text-on-surface-variant font-body-base">전시 지원 시스템의 글로벌 정책 및 AI 엔진 파라미터를 관리합니다.</p>
|
|
</div>
|
|
<!-- Bento Grid Settings Layout -->
|
|
<div class="grid grid-cols-12 gap-gutter">
|
|
<!-- Deadline Policy Card -->
|
|
<div class="col-span-12 lg:col-span-7 bg-white rounded-xl border border-outline-variant overflow-hidden flex flex-col group">
|
|
<div class="h-1 bg-primary w-full"></div>
|
|
<div class="p-stack-lg flex-1">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div>
|
|
<h4 class="font-title-sm text-title-sm text-on-surface">마감 정책 (Deadline Policy)</h4>
|
|
<p class="text-label-md text-on-surface-variant">전시회 주요 마일스톤 자동 설정</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-outline">event_available</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="space-y-2">
|
|
<label class="font-label-md text-on-surface-variant">Utility 신청 마감 (Days)</label>
|
|
<div class="relative">
|
|
<input class="w-full px-4 py-2 border border-outline-variant rounded-lg font-body-base form-input-focus transition-all pr-12" type="number" value="25"/>
|
|
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-label-md text-outline font-bold">D-</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="font-label-md text-on-surface-variant">제출 서류 마감 (Days)</label>
|
|
<div class="relative">
|
|
<input class="w-full px-4 py-2 border border-outline-variant rounded-lg font-body-base form-input-focus transition-all pr-12" type="number" value="7"/>
|
|
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-label-md text-outline font-bold">D-</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="font-label-md text-on-surface-variant">부스 배치 확정 (Days)</label>
|
|
<div class="relative">
|
|
<input class="w-full px-4 py-2 border border-outline-variant rounded-lg font-body-base form-input-focus transition-all pr-12" type="number" value="45"/>
|
|
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-label-md text-outline font-bold">D-</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="font-label-md text-on-surface-variant">추가 전력 승인 (Days)</label>
|
|
<div class="relative">
|
|
<input class="w-full px-4 py-2 border border-outline-variant rounded-lg font-body-base form-input-focus transition-all pr-12" type="number" value="14"/>
|
|
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-label-md text-outline font-bold">D-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-low px-stack-lg py-4 flex justify-end">
|
|
<button class="px-6 py-2 bg-primary text-white font-label-md rounded-lg hover:opacity-90 transition-all flex items-center">
|
|
<span class="material-symbols-outlined text-sm mr-2">save</span>
|
|
저장
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- AI Platform Gate Card -->
|
|
<div class="col-span-12 lg:col-span-5 bg-white rounded-xl border border-secondary-container border-opacity-30 overflow-hidden flex flex-col relative">
|
|
<div class="h-1 bg-secondary w-full"></div>
|
|
<div class="p-stack-lg flex-1">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<h4 class="font-title-sm text-title-sm text-on-surface">AI 플랫폼 게이트</h4>
|
|
<span class="material-symbols-outlined text-secondary text-sm" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
|
</div>
|
|
<p class="text-label-md text-on-surface-variant">모델 라우팅 및 처리 엔진 제어</p>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between p-3 border border-outline-variant rounded-lg bg-surface-container-lowest">
|
|
<div>
|
|
<p class="font-label-md text-on-surface">Model Router Status</p>
|
|
<p class="text-xs text-on-surface-variant">Active Load Balancing</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer switch-input" type="checkbox"/>
|
|
<div class="w-11 h-6 bg-outline-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div>
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center justify-between p-3 border border-outline-variant rounded-lg bg-surface-container-lowest">
|
|
<div>
|
|
<p class="font-label-md text-on-surface">Spatial Layout Engine</p>
|
|
<p class="text-xs text-on-surface-variant">Auto Booth Placement</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer switch-input" type="checkbox"/>
|
|
<div class="w-11 h-6 bg-outline-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div>
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center justify-between p-3 border border-outline-variant rounded-lg bg-surface-container-lowest">
|
|
<div>
|
|
<p class="font-label-md text-on-surface">Risk Analysis Engine</p>
|
|
<p class="text-xs text-on-surface-variant">Safety Regulation Check</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input class="sr-only peer switch-input" type="checkbox"/>
|
|
<div class="w-11 h-6 bg-outline-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-low px-stack-lg py-4 flex justify-end">
|
|
<button class="px-6 py-2 bg-secondary text-white font-label-md rounded-lg hover:opacity-90 transition-all flex items-center">
|
|
<span class="material-symbols-outlined text-sm mr-2">refresh</span>
|
|
갱신
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Notification Settings Card -->
|
|
<div class="col-span-12 lg:col-span-4 bg-white rounded-xl border border-outline-variant overflow-hidden flex flex-col">
|
|
<div class="h-1 bg-tertiary-container w-full"></div>
|
|
<div class="p-stack-lg flex-1">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div>
|
|
<h4 class="font-title-sm text-title-sm text-on-surface">알림 설정</h4>
|
|
<p class="text-label-md text-on-surface-variant">전시 관리자 채널별 알림 제어</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-tertiary">notifications_active</span>
|
|
</div>
|
|
<ul class="space-y-4">
|
|
<li class="flex items-center justify-between group">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-tertiary transition-colors">mail</span>
|
|
<span class="font-body-base">이메일 (Email)</span>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" type="checkbox"/>
|
|
<div class="w-10 h-5 bg-outline-variant rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-tertiary-container"></div>
|
|
</label>
|
|
</li>
|
|
<li class="flex items-center justify-between group">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-tertiary transition-colors">sync_alt</span>
|
|
<span class="font-body-base">웹소켓 (WebSocket)</span>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" type="checkbox"/>
|
|
<div class="w-10 h-5 bg-outline-variant rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-tertiary-container"></div>
|
|
</label>
|
|
</li>
|
|
<li class="flex items-center justify-between group">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-tertiary transition-colors">send_to_mobile</span>
|
|
<span class="font-body-base">푸시 알림 (Push)</span>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input class="sr-only peer" type="checkbox"/>
|
|
<div class="w-10 h-5 bg-outline-variant rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-tertiary-container"></div>
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-surface-container-low px-stack-lg py-4 flex justify-end">
|
|
<button class="px-6 py-2 bg-tertiary-container text-white font-label-md rounded-lg hover:opacity-90 transition-all">저장</button>
|
|
</div>
|
|
</div>
|
|
<!-- Security & Account Card -->
|
|
<div class="col-span-12 lg:col-span-8 bg-white rounded-xl border border-outline-variant overflow-hidden flex flex-col">
|
|
<div class="h-1 bg-error w-full"></div>
|
|
<div class="p-stack-lg flex-1">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div>
|
|
<h4 class="font-title-sm text-title-sm text-on-surface">보안 및 계정 (Security & Account)</h4>
|
|
<p class="text-label-md text-on-surface-variant">시스템 접근 권한 및 보안 임계값 설정</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-error">lock_reset</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-8">
|
|
<div class="space-y-4">
|
|
<div class="space-y-2">
|
|
<label class="font-label-md text-on-surface-variant">로그인 실패 잠금 임계치</label>
|
|
<div class="flex items-center gap-3">
|
|
<input class="flex-1 accent-error" max="10" min="3" type="range" value="5"/>
|
|
<span class="w-8 text-center font-bold text-on-surface">5</span>
|
|
</div>
|
|
<p class="text-[10px] text-on-surface-variant">회 연속 실패 시 계정이 30분간 잠금 처리됩니다.</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="font-label-md text-on-surface-variant">세션 타임아웃 (Minutes)</label>
|
|
<input class="w-full px-4 py-2 border border-outline-variant rounded-lg font-body-base form-input-focus transition-all" type="number" value="120"/>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-4 border-l border-outline-variant pl-8">
|
|
<div class="p-3 bg-error-container bg-opacity-30 rounded-lg border border-error border-opacity-10">
|
|
<p class="font-label-md text-error flex items-center">
|
|
<span class="material-symbols-outlined text-sm mr-1">warning</span>
|
|
중요 보안 경고
|
|
</p>
|
|
<p class="text-[11px] text-on-surface-variant mt-1 leading-relaxed">
|
|
비활성 세션의 자동 종료 시간이 4시간을 초과하면 보안 취약성이 증가할 수 있습니다. 120분 이내를 권장합니다.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<input class="rounded border-outline-variant text-error focus:ring-error" id="mfa" type="checkbox"/>
|
|
<label class="font-body-base text-on-surface" for="mfa">관리자 2단계 인증(MFA) 강제</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-low px-stack-lg py-4 flex justify-end">
|
|
<button class="px-6 py-2 border border-error text-error hover:bg-error hover:text-white font-label-md rounded-lg transition-all">보안 정책 업데이트</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom Floating Action State (Optional Contextual Info) -->
|
|
<div class="mt-stack-lg p-stack-lg border border-outline-variant rounded-xl glass-panel flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 bg-surface-container-high rounded-full flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-primary">history</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-label-md text-on-surface">마지막 변경 사항</p>
|
|
<p class="text-xs text-on-surface-variant">2023-11-20 14:32:01 (Admin: 김관리)</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="px-4 py-2 text-primary font-label-md hover:bg-primary-fixed rounded-lg transition-colors">설정 로그 보기</button>
|
|
<button class="px-4 py-2 bg-primary text-white font-label-md rounded-lg shadow-sm">전체 초기화</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Simple Feedback Toast (Hidden by default) -->
|
|
<div class="fixed bottom-8 right-8 bg-inverse-surface text-inverse-on-surface px-6 py-3 rounded-lg shadow-xl translate-y-20 opacity-0 transition-all flex items-center gap-3" id="toast">
|
|
<span class="material-symbols-outlined text-tertiary-fixed">check_circle</span>
|
|
<span class="font-label-md">설정이 성공적으로 저장되었습니다.</span>
|
|
</div>
|
|
<script>
|
|
// Micro-interactions for buttons
|
|
document.querySelectorAll('button').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const toast = document.getElementById('toast');
|
|
if (this.textContent.includes('저장') || this.textContent.includes('업데이트')) {
|
|
toast.classList.remove('translate-y-20', 'opacity-0');
|
|
setTimeout(() => {
|
|
toast.classList.add('translate-y-20', 'opacity-0');
|
|
}, 3000);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Range input dynamic value display
|
|
const range = document.querySelector('input[type="range"]');
|
|
const rangeVal = range.nextElementSibling;
|
|
range.addEventListener('input', (e) => {
|
|
rangeVal.textContent = e.target.value;
|
|
});
|
|
</script>
|
|
</body></html> |