zio/kintex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
69a8b5288d
kintex/stitch_kintex_ai_system_architect/scr_a9/code.html
zio c3a695d70c feat(stitch): harvest all 39 pending screens (64/64 secured) 
- 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>
2026-07-12 03:27:05 +09:00

486 lines
24 KiB
HTML
Raw Blame History

<!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 Exhibition Management - Super Admin</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&amp;family=Geist:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.step-active::before {
content: '';
position: absolute;
left: -1px;
top: 0;
bottom: 0;
width: 2px;
background-color: #004e8b;
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary-fixed-dim": "#72daa9",
"surface-container-low": "#f1f3ff",
"primary": "#004e8b",
"surface-container": "#e9edff",
"secondary-fixed-dim": "#c9bfff",
"outline": "#717782",
"tertiary-container": "#00734e",
"error-container": "#ffdad6",
"surface-tint": "#0060a9",
"surface-bright": "#f9f9ff",
"surface": "#f9f9ff",
"primary-fixed": "#d3e4ff",
"on-tertiary-fixed-variant": "#005236",
"on-error": "#ffffff",
"inverse-primary": "#a2c9ff",
"on-secondary": "#ffffff",
"tertiary": "#00583b",
"on-secondary-fixed": "#1b0063",
"on-error-container": "#93000a",
"on-primary": "#ffffff",
"background": "#f9f9ff",
"secondary-container": "#6d4aff",
"surface-dim": "#d2daf0",
"outline-variant": "#c1c7d3",
"error": "#ba1a1a",
"inverse-on-surface": "#edf0ff",
"secondary-fixed": "#e5deff",
"primary-fixed-dim": "#a2c9ff",
"surface-container-highest": "#dbe2f9",
"on-tertiary": "#ffffff",
"on-primary-container": "#d2e3ff",
"surface-container-lowest": "#ffffff",
"on-surface": "#141b2c",
"surface-variant": "#dbe2f9",
"primary-container": "#0066b3",
"on-primary-fixed-variant": "#004881"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"container-padding": "24px",
"base": "4px",
"stack-md": "16px",
"gutter": "16px",
"stack-sm": "8px",
"stack-lg": "24px"
},
"fontFamily": {
"headline-md": ["Inter"],
"body-sm": ["Inter"],
"body-base": ["Inter"],
"title-sm": ["Inter"],
"label-xs": ["Geist"],
"label-md": ["Geist"],
"display-lg": ["Inter"]
},
"fontSize": {
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
"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>
</head>
<body class="bg-background text-on-surface font-body-base overflow-hidden flex h-screen w-full">
<!-- SideNavBar Component -->
<aside class="fixed left-0 top-0 h-full w-64 z-50 bg-surface-container-low border-r border-outline-variant flex flex-col py-6 px-4">
<div class="mb-10 px-2 flex items-center gap-3">
<div class="w-8 h-8 bg-primary rounded flex items-center justify-center">
<span class="material-symbols-outlined text-white text-[20px]" data-weight="fill">corporate_fare</span>
</div>
<div>
<h1 class="font-title-sm text-title-sm font-bold text-primary leading-tight">KINTEX Admin</h1>
<p class="text-on-surface-variant font-label-md text-[10px] uppercase tracking-wider">Enterprise Management</p>
</div>
</div>
<nav class="flex-1 space-y-1">
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-container-high transition-transform scale-95 active:scale-90 font-label-md text-label-md" href="#">
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
대시보드
</a>
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-container-high transition-transform scale-95 active:scale-90 font-label-md text-label-md" href="#">
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
부스 관리
</a>
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-container-high transition-transform scale-95 active:scale-90 font-label-md text-label-md" href="#">
<span class="material-symbols-outlined" data-icon="calendar_month">calendar_month</span>
전시 일정
</a>
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-container-high transition-transform scale-95 active:scale-90 font-label-md text-label-md" href="#">
<span class="material-symbols-outlined" data-icon="security">security</span>
감사 로그
</a>
<a class="bg-primary-container text-on-primary-container font-bold rounded-lg flex items-center gap-3 px-3 py-2.5 transition-transform scale-95 active:scale-90 font-label-md text-label-md" href="#">
<span class="material-symbols-outlined" data-icon="corporate_fare">corporate_fare</span>
테넌트 설정
</a>
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-container-high transition-transform scale-95 active:scale-90 font-label-md text-label-md" href="#">
<span class="material-symbols-outlined" data-icon="settings_suggest">settings_suggest</span>
시스템 로그
</a>
</nav>
<div class="mt-auto border-t border-outline-variant pt-4 space-y-1">
<button class="w-full mb-4 py-2.5 px-4 bg-primary text-white rounded font-label-md text-label-md flex items-center justify-center gap-2 hover:bg-opacity-90">
<span class="material-symbols-outlined text-[18px]">download</span>
CSV 내보내기
</button>
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-high font-label-md text-label-md" href="#">
<span class="material-symbols-outlined" data-icon="help">help</span>
도움말
</a>
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-high font-label-md text-label-md" href="#">
<span class="material-symbols-outlined" data-icon="logout">logout</span>
로그아웃
</a>
</div>
</aside>
<!-- Content Main Area -->
<main class="flex-1 ml-64 flex flex-col h-full bg-background overflow-hidden">
<!-- TopNavBar Component -->
<header class="fixed top-0 left-64 right-0 h-16 z-40 bg-surface-container-lowest border-b border-outline-variant px-gutter flex justify-between items-center">
<div class="flex items-center gap-6 w-1/2">
<div class="relative w-full max-w-md">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span>
<input class="w-full bg-surface-container border-none rounded-lg py-2 pl-10 pr-4 text-body-sm focus:ring-2 focus:ring-primary" placeholder="테넌트, 도메인, 또는 관리자 검색..." type="text"/>
</div>
</div>
<div class="flex items-center gap-4">
<button class="w-10 h-10 flex items-center justify-center rounded-full text-on-surface-variant hover:bg-surface-container-low transition-colors">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
</button>
<button class="w-10 h-10 flex items-center justify-center rounded-full text-on-surface-variant hover:bg-surface-container-low transition-colors">
<span class="material-symbols-outlined" data-icon="help">help</span>
</button>
<div class="h-8 w-px bg-outline-variant mx-2"></div>
<div class="flex items-center gap-3 ml-2 group cursor-pointer">
<div class="text-right">
<p class="font-label-md text-label-md text-on-surface">Super Admin</p>
<p class="text-on-surface-variant text-[11px]">System Manager</p>
</div>
<img class="w-9 h-9 rounded-full border border-outline-variant object-cover" data-alt="A professional headshot of a corporate administrator in a modern office setting. High-end business attire, neutral lighting, and a soft blurred background of a technology-focused workspace. The aesthetic is clean, professional, and reliable, aligned with the KINTEX AI brand's institutional authority." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAxg83FFQTmt-Kn8bMH-Ya29CBdQzyY18t0SjTuDuZvt176htTw8qzHVw3FaOBxIzfX9rxfky-x446J0Y_jhIuuSEKJMPFipbqxo6E1DIOepQLBaLjl07kP4dAIzeb93YlTtxs6iM1HBEcCZ7rjfchFBXt3tNxU-wa55MW-g0PZBTz_N81os5tAijK8v_S1g2s1wEKQyAYzowqYSbtXMzPqfVtKs393HktmuzDExKO_AtAfNtJXlgDXF5e-pFCXY3WCT8tHfxmtSP8"/>
</div>
</div>
</header>
<!-- Main Body Scrollable Area -->
<div class="mt-16 p-container-padding flex-1 overflow-y-auto space-y-stack-lg">
<div class="flex justify-between items-end">
<div>
<h2 class="font-headline-md text-headline-md text-on-surface">테넌트 관리 및 온보딩</h2>
<p class="text-on-surface-variant text-body-base">멀티 테넌트 인프라 환경의 리소스 할당 및 새로운 전시관 인스턴스를 관리합니다.</p>
</div>
<div class="flex gap-2">
<button class="px-4 py-2 bg-surface-container-high text-on-surface font-label-md text-label-md rounded border border-outline-variant hover:bg-surface-container-highest transition-colors">시스템 모니터링</button>
<button class="px-4 py-2 bg-primary text-white font-label-md text-label-md rounded flex items-center gap-2 hover:bg-opacity-90 transition-shadow">
<span class="material-symbols-outlined text-[18px]">add</span>
신규 테넌트 등록
</button>
</div>
</div>
<!-- Dashboard Layout (Two Columns) -->
<div class="grid grid-cols-10 gap-gutter items-start">
<!-- Left: Tenant List (70%) -->
<div class="col-span-7 bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden flex flex-col">
<div class="px-6 py-4 border-b border-outline-variant bg-white flex justify-between items-center">
<h3 class="font-title-sm text-title-sm text-on-surface">테넌트 목록</h3>
<div class="flex items-center gap-2">
<span class="text-label-xs text-on-surface-variant">정렬 기준:</span>
<select class="text-label-md bg-transparent border-none focus:ring-0 cursor-pointer text-primary">
<option>생성일순</option>
<option>활성 사용자순</option>
<option>행사수순</option>
</select>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-surface-container-low text-on-surface-variant font-label-md text-[11px] uppercase tracking-wider">
<th class="px-6 py-3 border-b border-outline-variant">전시관 (Venue)</th>
<th class="px-6 py-3 border-b border-outline-variant">코드</th>
<th class="px-6 py-3 border-b border-outline-variant">도메인</th>
<th class="px-6 py-3 border-b border-outline-variant">상태</th>
<th class="px-6 py-3 border-b border-outline-variant text-right">행사수</th>
<th class="px-6 py-3 border-b border-outline-variant text-right">사용자수</th>
<th class="px-6 py-3 border-b border-outline-variant"></th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant">
<!-- Row 1 -->
<tr class="hover:bg-surface-container-low/50 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center text-primary font-bold text-[12px]">K</div>
<span class="font-medium text-on-surface">킨텍스</span>
</div>
</td>
<td class="px-6 py-4 font-label-md text-on-surface-variant">KINTEX</td>
<td class="px-6 py-4 text-body-sm text-on-surface-variant">kintex.wise.ai.kr</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-medium bg-tertiary-fixed-dim/20 text-tertiary border border-tertiary/20">
활성 (Active)
</span>
</td>
<td class="px-6 py-4 text-right font-label-md">24</td>
<td class="px-6 py-4 text-right font-label-md">1,280</td>
<td class="px-6 py-4 text-right">
<button class="p-1 rounded hover:bg-surface-container-high text-on-surface-variant">
<span class="material-symbols-outlined text-[20px]">more_vert</span>
</button>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-surface-container-low/50 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-secondary/10 flex items-center justify-center text-secondary font-bold text-[12px]">C</div>
<span class="font-medium text-on-surface">코엑스</span>
</div>
</td>
<td class="px-6 py-4 font-label-md text-on-surface-variant">COEX</td>
<td class="px-6 py-4 text-body-sm text-on-surface-variant">coex.wise.ai.kr</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-medium bg-primary-fixed text-on-primary-fixed-variant border border-primary/20">
온보딩중 (Onboarding)
</span>
</td>
<td class="px-6 py-4 text-right font-label-md text-outline-variant">-</td>
<td class="px-6 py-4 text-right font-label-md text-outline-variant">-</td>
<td class="px-6 py-4 text-right">
<button class="p-1 rounded hover:bg-surface-container-high text-on-surface-variant">
<span class="material-symbols-outlined text-[20px]">more_vert</span>
</button>
</td>
</tr>
<!-- AI Drafted Placeholder -->
<tr class="bg-primary/5 border-l-4 border-primary">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded border border-dashed border-primary flex items-center justify-center text-primary opacity-50">
<span class="material-symbols-outlined text-[16px]">add</span>
</div>
<div class="flex items-center gap-1.5">
<span class="material-symbols-outlined text-secondary text-[16px]">auto_awesome</span>
<span class="text-on-surface italic opacity-60">신규 입점 예정...</span>
</div>
</div>
</td>
<td class="px-6 py-4" colspan="6">
<p class="text-body-sm text-on-surface-variant italic">임시 데이터 분석 중: BEXCO (부산) 테넌트 구성 제안됨</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-3 bg-white border-t border-outline-variant flex justify-between items-center">
<span class="text-label-xs text-on-surface-variant">전체 2개의 테넌트 표시됨</span>
<div class="flex gap-2">
<button class="p-1 rounded border border-outline-variant disabled:opacity-30" disabled="">
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
</button>
<button class="p-1 rounded border border-outline-variant">
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
</button>
</div>
</div>
</div>
<!-- Right: Venue Onboarding Wizard (30%) -->
<div class="col-span-3 space-y-gutter">
<section class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden flex flex-col">
<div class="px-5 py-4 border-b border-outline-variant bg-white">
<div class="flex items-center justify-between mb-1">
<h3 class="font-title-sm text-title-sm text-on-surface">전시관 온보딩</h3>
<span class="bg-primary/10 text-primary text-[10px] px-2 py-0.5 rounded-full font-bold">진행 중 (4/7)</span>
</div>
<p class="text-label-md text-on-surface-variant font-normal">코엑스 (COEX) 설정 프로세스</p>
</div>
<div class="p-5">
<ul class="relative space-y-4 before:content-[''] before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[1px] before:bg-outline-variant">
<!-- Completed -->
<li class="relative flex items-start gap-4">
<div class="z-10 w-6 h-6 rounded-full bg-tertiary text-white flex items-center justify-center">
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
</div>
<div class="flex-1">
<p class="font-label-md text-label-md text-on-surface">테넌트 생성</p>
<p class="text-[11px] text-tertiary">완료: 2023.10.24</p>
</div>
</li>
<!-- Completed -->
<li class="relative flex items-start gap-4">
<div class="z-10 w-6 h-6 rounded-full bg-tertiary text-white flex items-center justify-center">
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
</div>
<div class="flex-1">
<p class="font-label-md text-label-md text-on-surface">서브도메인 설정</p>
<p class="text-[11px] text-tertiary">완료: coex.wise.ai.kr</p>
</div>
</li>
<!-- Completed -->
<li class="relative flex items-start gap-4">
<div class="z-10 w-6 h-6 rounded-full bg-tertiary text-white flex items-center justify-center">
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
</div>
<div class="flex-1">
<p class="font-label-md text-label-md text-on-surface">브랜딩 (CI/BI)</p>
<p class="text-[11px] text-tertiary">자산 업로드 완료</p>
</div>
</li>
<!-- Active -->
<li class="relative flex items-start gap-4 step-active">
<div class="z-10 w-6 h-6 rounded-full bg-primary-container text-white flex items-center justify-center ring-4 ring-primary-container/20">
<span class="text-[11px] font-bold">4</span>
</div>
<div class="flex-1">
<p class="font-label-md text-label-md text-primary">마스터데이터 입력</p>
<p class="text-[11px] text-on-surface-variant">홀 정보 및 도면 데이터 업로드 중...</p>
<div class="mt-3 bg-surface-container-low p-2.5 rounded border border-outline-variant/30">
<div class="flex justify-between text-[10px] mb-1">
<span>데이터 무결성 검사</span>
<span class="font-bold text-primary">65%</span>
</div>
<div class="w-full bg-surface-container h-1 rounded-full overflow-hidden">
<div class="bg-primary h-full transition-all duration-1000" style="width: 65%"></div>
</div>
</div>
</div>
</li>
<!-- Pending -->
<li class="relative flex items-start gap-4 opacity-50">
<div class="z-10 w-6 h-6 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center">
<span class="text-[11px] font-bold">5</span>
</div>
<div class="flex-1">
<p class="font-label-md text-label-md">관리자 계정 생성</p>
</div>
</li>
<!-- Pending -->
<li class="relative flex items-start gap-4 opacity-50">
<div class="z-10 w-6 h-6 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center">
<span class="text-[11px] font-bold">6</span>
</div>
<div class="flex-1">
<p class="font-label-md text-label-md">격리 스모크 테스트</p>
</div>
</li>
<!-- Pending -->
<li class="relative flex items-start gap-4 opacity-50">
<div class="z-10 w-6 h-6 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center">
<span class="text-[11px] font-bold">7</span>
</div>
<div class="flex-1">
<p class="font-label-md text-label-md">활성화</p>
</div>
</li>
</ul>
</div>
<div class="mt-auto p-4 bg-secondary-container/5 border-t border-secondary-container/10">
<div class="flex gap-2 items-start text-secondary">
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">info</span>
<div>
<p class="text-[11px] font-bold leading-tight">시스템 안내</p>
<p class="text-[11px] opacity-80 leading-snug">코드 배포 없이 데이터 온보딩 기반으로 실시간 활성화가 가능합니다.</p>
</div>
</div>
</div>
</section>
<!-- Deployment Stats Small Card -->
<div class="bg-surface-container border border-outline-variant rounded-lg p-5">
<h4 class="font-label-md text-label-md text-on-surface mb-3 flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-[18px]">cloud_sync</span>
클러스터 리소스 현황
</h4>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span class="text-body-sm text-on-surface-variant">API Latency</span>
<span class="font-label-md text-tertiary">24ms (Healthy)</span>
</div>
<div class="flex justify-between items-center">
<span class="text-body-sm text-on-surface-variant">Storage Usage</span>
<span class="font-label-md">1.2TB / 5.0TB</span>
</div>
<div class="w-full bg-outline-variant/20 h-1.5 rounded-full overflow-hidden">
<div class="bg-primary-container h-full" style="width: 24%"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Quick Actions / Info -->
<div class="grid grid-cols-4 gap-gutter">
<div class="bg-white border border-outline-variant p-4 rounded-lg flex items-center gap-4 hover:shadow-md transition-shadow cursor-pointer">
<div class="w-12 h-12 rounded bg-primary/5 flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-[28px]">dns</span>
</div>
<div>
<p class="text-label-md font-bold text-on-surface">도메인 매핑</p>
<p class="text-[11px] text-on-surface-variant">CNAME 및 SSL 인증서 관리</p>
</div>
</div>
<div class="bg-white border border-outline-variant p-4 rounded-lg flex items-center gap-4 hover:shadow-md transition-shadow cursor-pointer">
<div class="w-12 h-12 rounded bg-tertiary/5 flex items-center justify-center text-tertiary">
<span class="material-symbols-outlined text-[28px]">database</span>
</div>
<div>
<p class="text-label-md font-bold text-on-surface">DB 샤딩 현황</p>
<p class="text-[11px] text-on-surface-variant">테넌트별 데이터 격리 수준 확인</p>
</div>
</div>
<div class="bg-white border border-outline-variant p-4 rounded-lg flex items-center gap-4 hover:shadow-md transition-shadow cursor-pointer">
<div class="w-12 h-12 rounded bg-secondary/5 flex items-center justify-center text-secondary">
<span class="material-symbols-outlined text-[28px]">verified_user</span>
</div>
<div>
<p class="text-label-md font-bold text-on-surface">IAM 정책 관리</p>
<p class="text-[11px] text-on-surface-variant">관리자 권한 및 역할 배분</p>
</div>
</div>
<div class="bg-white border border-outline-variant p-4 rounded-lg flex items-center gap-4 hover:shadow-md transition-shadow cursor-pointer">
<div class="w-12 h-12 rounded bg-error-container/20 flex items-center justify-center text-error">
<span class="material-symbols-outlined text-[28px]">security_update_warning</span>
</div>
<div>
<p class="text-label-md font-bold text-on-surface">보안 모니터링</p>
<p class="text-[11px] text-on-surface-variant">비정상 접근 시도 탐지 (0)</p>
</div>
</div>
</div>
</div>
</main>
<!-- FAB for Global Super Admin Support -->
<button class="fixed bottom-8 right-8 w-14 h-14 bg-primary text-white rounded-full shadow-lg flex items-center justify-center hover:scale-105 active:scale-95 transition-all z-50">
<span class="material-symbols-outlined text-[28px]">support_agent</span>
</button>
<script>
// Simple micro-interaction for the onboarding progress
document.addEventListener('DOMContentLoaded', () => {
const progress = document.querySelector('.bg-primary.h-full');
if (progress) {
setTimeout(() => {
progress.style.width = '78%';
document.querySelector('.text-primary.font-bold').innerText = '78%';
}, 2000);
}
});
</script>
</body></html>
Reference in New Issue View Git Blame Copy Permalink