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>
415 lines
22 KiB
HTML
415 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 전시관리 - 규정 룰셋 버전 관리</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-container-lowest": "#ffffff",
|
||
"secondary-fixed": "#e5deff",
|
||
"secondary": "#5427e6",
|
||
"on-primary-container": "#d2e3ff",
|
||
"on-tertiary": "#ffffff",
|
||
"on-primary-fixed-variant": "#004881",
|
||
"tertiary-fixed-dim": "#72daa9",
|
||
"surface-container-highest": "#dbe2f9",
|
||
"surface-dim": "#d2daf0",
|
||
"primary": "#004e8b",
|
||
"surface-variant": "#dbe2f9",
|
||
"on-secondary-fixed-variant": "#4500d8",
|
||
"tertiary": "#00583b",
|
||
"secondary-fixed-dim": "#c9bfff",
|
||
"on-tertiary-fixed": "#002113",
|
||
"outline": "#717782",
|
||
"on-surface": "#141b2c",
|
||
"inverse-primary": "#a2c9ff",
|
||
"primary-fixed-dim": "#a2c9ff",
|
||
"on-primary-fixed": "#001c38",
|
||
"tertiary-fixed": "#8ef7c4",
|
||
"on-secondary-fixed": "#1b0063",
|
||
"inverse-on-surface": "#edf0ff",
|
||
"surface-container-low": "#f1f3ff",
|
||
"on-secondary-container": "#f3edff",
|
||
"surface": "#f9f9ff",
|
||
"on-error": "#ffffff",
|
||
"background": "#f9f9ff",
|
||
"surface-tint": "#0060a9",
|
||
"on-background": "#141b2c",
|
||
"error-container": "#ffdad6",
|
||
"primary-container": "#0066b3",
|
||
"outline-variant": "#c1c7d3",
|
||
"surface-container-high": "#e0e8ff",
|
||
"primary-fixed": "#d3e4ff",
|
||
"on-tertiary-fixed-variant": "#005236",
|
||
"on-tertiary-container": "#8ef7c3",
|
||
"error": "#ba1a1a",
|
||
"secondary-container": "#6d4aff",
|
||
"tertiary-container": "#00734e",
|
||
"surface-container": "#e9edff",
|
||
"on-error-container": "#93000a",
|
||
"on-primary": "#ffffff",
|
||
"on-surface-variant": "#414751",
|
||
"on-secondary": "#ffffff",
|
||
"surface-bright": "#f9f9ff",
|
||
"inverse-surface": "#293041"
|
||
},
|
||
"borderRadius": {
|
||
"DEFAULT": "0.125rem",
|
||
"lg": "0.25rem",
|
||
"xl": "0.5rem",
|
||
"full": "0.75rem"
|
||
},
|
||
"spacing": {
|
||
"base": "4px",
|
||
"gutter": "16px",
|
||
"stack-sm": "8px",
|
||
"stack-md": "16px",
|
||
"stack-lg": "24px",
|
||
"container-padding": "24px"
|
||
},
|
||
"fontFamily": {
|
||
"title-sm": ["Inter"],
|
||
"body-sm": ["Inter"],
|
||
"label-md": ["Geist"],
|
||
"display-lg": ["Inter"],
|
||
"headline-md": ["Inter"],
|
||
"body-base": ["Inter"],
|
||
"label-xs": ["Geist"]
|
||
},
|
||
"fontSize": {
|
||
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}]
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style>
|
||
body {
|
||
background-color: #f9f9ff;
|
||
color: #141b2c;
|
||
font-family: 'Inter', sans-serif;
|
||
overflow-x: hidden;
|
||
}
|
||
.material-symbols-outlined {
|
||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||
vertical-align: middle;
|
||
}
|
||
.ai-sparkle {
|
||
background: linear-gradient(135deg, #6d4aff 0%, #a2c9ff 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.glass-panel {
|
||
background: rgba(255, 255, 255, 0.8);
|
||
backdrop-filter: blur(8px);
|
||
border: 1px solid #e4e7ec;
|
||
}
|
||
.diff-highlight {
|
||
background-color: rgba(142, 247, 196, 0.2);
|
||
border: 1px dashed #00734e;
|
||
padding: 2px 4px;
|
||
border-radius: 2px;
|
||
}
|
||
.status-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 2px 8px;
|
||
border-radius: 9999px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="flex min-h-screen">
|
||
<!-- SideNavBar (JSON Derived) -->
|
||
<aside class="h-screen w-64 flex flex-col fixed left-0 top-0 border-r border-outline-variant bg-surface-container-lowest dark:bg-inverse-surface z-50">
|
||
<div class="flex flex-col h-full py-container-padding">
|
||
<div class="px-6 mb-8 flex items-center gap-3">
|
||
<img alt="KINTEX Admin Logo" class="w-10 h-10 object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC6V0s6sv3fICyRYDkuGa9U7wtttCQXigoxrZik7bHl2PFslxM-DJd8qSQY6gMx9k67jg7BGYJDDYzA_Rv-pj-rQWYydKc72hCmvBxl_FNEri0l9fe9v4wjw1eZNXbKJ49hY3sOTDiF004PcPCmDXgQmBt7glmbNcJMjxyPWeYtPp3RqbfjIqgKv0DkgRuOZpRXbgfPMQ6uukggW2BX_vmeStzPRmnO9w9wMX1LkMA3OErTiZ6ioaz_Khdz8kWV_vEcdKBq56nE3Hk"/>
|
||
<div>
|
||
<h1 class="font-headline-md text-headline-md font-bold text-primary">KINTEX AI</h1>
|
||
<p class="font-label-xs text-label-xs text-on-surface-variant opacity-70">Exhibition Management</p>
|
||
</div>
|
||
</div>
|
||
<nav class="flex-1 px-3 space-y-1">
|
||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg" 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 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg" href="#">
|
||
<span class="material-symbols-outlined">group</span>
|
||
<span class="font-label-md text-label-md">User Management</span>
|
||
</a>
|
||
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container font-semibold rounded-lg scale-[0.99] transition-transform duration-150" href="#">
|
||
<span class="material-symbols-outlined">settings_ethernet</span>
|
||
<span class="font-label-md text-label-md">Common Code Management</span>
|
||
</a>
|
||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg" href="#">
|
||
<span class="material-symbols-outlined">grid_view</span>
|
||
<span class="font-label-md text-label-md">Exhibition Layout</span>
|
||
</a>
|
||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg" href="#">
|
||
<span class="material-symbols-outlined">settings</span>
|
||
<span class="font-label-md text-label-md">Settings</span>
|
||
</a>
|
||
</nav>
|
||
<div class="px-3 mt-auto pt-6 border-t border-outline-variant space-y-1">
|
||
<button class="w-full flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg">
|
||
<span class="material-symbols-outlined">help</span>
|
||
<span class="font-label-md text-label-md">Help Center</span>
|
||
</button>
|
||
<button class="w-full flex items-center gap-3 px-4 py-3 text-error hover:bg-error-container transition-colors rounded-lg">
|
||
<span class="material-symbols-outlined">logout</span>
|
||
<span class="font-label-md text-label-md">Logout</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
<main class="flex-1 ml-64 flex flex-col min-w-0">
|
||
<!-- TopNavBar (JSON Derived) -->
|
||
<header class="h-16 w-full sticky top-0 z-40 border-b border-outline-variant bg-surface flex items-center justify-between px-gutter">
|
||
<div class="flex items-center gap-2">
|
||
<nav class="flex items-center text-on-surface-variant font-label-md text-label-md">
|
||
<span>시스템 설정</span>
|
||
<span class="material-symbols-outlined text-sm mx-1">chevron_right</span>
|
||
<span class="text-primary font-bold">규정 룰셋 버전 관리</span>
|
||
</nav>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<div class="relative group">
|
||
<input class="h-9 px-4 pr-10 rounded-full bg-surface-container-low border-none focus:ring-2 focus:ring-primary text-body-sm w-64 transition-all" placeholder="Search rules..." type="text"/>
|
||
<span class="material-symbols-outlined absolute right-3 top-2 text-on-surface-variant">search</span>
|
||
</div>
|
||
<button class="material-symbols-outlined p-2 hover:bg-surface-container-high rounded-full transition-colors">notifications</button>
|
||
<button class="material-symbols-outlined p-2 hover:bg-surface-container-high rounded-full transition-colors">help</button>
|
||
<div class="h-8 w-[1px] bg-outline-variant"></div>
|
||
<div class="flex items-center gap-3 pl-2">
|
||
<span class="font-label-md text-label-md font-semibold">Admin Profile</span>
|
||
<img class="w-8 h-8 rounded-full border border-outline-variant object-cover" data-alt="A professional headshot of a corporate administrator, middle-aged male with glasses, wearing a sleek modern navy suit. The image has a clean, high-key studio lighting with a soft neutral gray background, maintaining a professional and reliable B2B enterprise aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBOeVDzDtw9HgCHPbNvLCorzXespBE58iXkZbwD1nbJcQDBIJDs-wCqmcbD2QyeGdcVKZcx2mtPg7WcxBtEBcut0CcgYKNqw5P6DnzcrCFif5Fa5O6PEyBvQnBwNFJ92cL2cNDt7ykDIgF-OlXHDI5Y5Nndl-MjQFf0d9alaEw5_7yKZZ50zDHRaw8y0vOy4QsvY4KXcyPrWjzGRBLdojN7uanbtfHzqBhBNgu_cp-3t9ORKhBlDC5fRH9UkZaef9EE-KM5nQe1tu0"/>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- Page Content -->
|
||
<div class="flex-1 flex overflow-hidden p-6 gap-6">
|
||
<!-- Left Panel: Version History -->
|
||
<section class="w-80 flex flex-col gap-4">
|
||
<div class="flex items-center justify-between">
|
||
<h2 class="font-title-sm text-title-sm">버전 히스토리</h2>
|
||
<button class="bg-primary hover:bg-primary-container text-white px-3 py-1.5 rounded-lg font-label-md text-label-md flex items-center gap-2 transition-all active:scale-95 shadow-sm">
|
||
<span class="material-symbols-outlined text-sm">add</span>
|
||
새 버전 초안 생성
|
||
</button>
|
||
</div>
|
||
<div class="flex-1 overflow-y-auto space-y-2">
|
||
<!-- Version Item Active -->
|
||
<div class="p-4 bg-surface-container-high border-l-4 border-primary rounded-r-xl cursor-pointer hover:shadow-md transition-all">
|
||
<div class="flex justify-between items-start mb-1">
|
||
<span class="font-bold text-body-base">v1.2</span>
|
||
<span class="status-badge bg-tertiary-container text-on-tertiary-container">현재 발효</span>
|
||
</div>
|
||
<p class="text-on-surface-variant font-label-xs">배포일: 2026-01-01</p>
|
||
<p class="text-on-surface-variant font-label-xs mt-2 italic">최신 전시 규정 통합본</p>
|
||
</div>
|
||
<!-- Version Item Expired -->
|
||
<div class="p-4 bg-white border border-outline-variant rounded-xl cursor-pointer hover:bg-surface-container-low transition-all">
|
||
<div class="flex justify-between items-start mb-1">
|
||
<span class="font-bold text-body-base text-on-surface-variant">v1.1</span>
|
||
<span class="status-badge bg-surface-container-highest text-on-surface-variant">만료</span>
|
||
</div>
|
||
<p class="text-on-surface-variant font-label-xs">배포일: 2025-06-01</p>
|
||
</div>
|
||
<!-- Version Item Expired -->
|
||
<div class="p-4 bg-white border border-outline-variant rounded-xl cursor-pointer hover:bg-surface-container-low transition-all">
|
||
<div class="flex justify-between items-start mb-1">
|
||
<span class="font-bold text-body-base text-on-surface-variant">v1.0</span>
|
||
<span class="status-badge bg-surface-container-highest text-on-surface-variant">만료</span>
|
||
</div>
|
||
<p class="text-on-surface-variant font-label-xs">배포일: 2025-01-01</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Right Panel: Rules Editor -->
|
||
<section class="flex-1 glass-panel rounded-2xl flex flex-col overflow-hidden shadow-sm">
|
||
<!-- Editor Header -->
|
||
<div class="px-container-padding py-stack-lg border-b border-outline-variant flex items-center justify-between bg-white/50">
|
||
<div>
|
||
<h2 class="font-title-sm text-title-sm flex items-center gap-2">
|
||
v1.2 상세 규칙 설정
|
||
<span class="material-symbols-outlined text-secondary text-lg" style="font-variation-settings: 'FILL' 1;">verified</span>
|
||
</h2>
|
||
<p class="text-on-surface-variant font-body-sm">총 12개의 규칙이 적용되어 있습니다.</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<button class="flex items-center gap-2 px-4 py-2 bg-secondary-container text-on-secondary-container rounded-lg font-label-md transition-all hover:brightness-110 active:scale-95 border border-secondary shadow-sm" id="diff-toggle">
|
||
<span class="material-symbols-outlined ai-sparkle" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||
버전 비교 (Diff)
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Rules List -->
|
||
<div class="flex-1 overflow-y-auto p-gutter">
|
||
<table class="w-full text-left border-separate border-spacing-y-2">
|
||
<thead>
|
||
<tr class="text-on-surface-variant font-label-md uppercase tracking-wider">
|
||
<th class="px-4 py-2 font-semibold">규칙명</th>
|
||
<th class="px-4 py-2 font-semibold text-center">수치/설정값</th>
|
||
<th class="px-4 py-2 font-semibold">논리/요구사항</th>
|
||
<th class="px-4 py-2 font-semibold">위반 수준</th>
|
||
<th class="px-4 py-2 font-semibold text-right">관리</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- Rule Row: Height -->
|
||
<tr class="rule-row bg-white border border-outline-variant rounded-lg transition-colors hover:bg-surface-container-low group">
|
||
<td class="px-4 py-4 font-semibold text-body-base">장치물 높이</td>
|
||
<td class="px-4 py-4">
|
||
<div class="flex items-center justify-center gap-2">
|
||
<input class="w-16 h-8 text-center border-outline-variant rounded focus:ring-primary text-body-sm transition-all diff-highlight-target" type="text" value="5m"/>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-4 text-on-surface-variant font-body-sm">
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-mono bg-surface-container text-primary px-1.5 py-0.5 rounded">≤</span>
|
||
<span>최대 높이 제한</span>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-4">
|
||
<span class="status-badge bg-error-container text-on-error-container">차단</span>
|
||
</td>
|
||
<td class="px-4 py-4 text-right">
|
||
<button class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">settings</button>
|
||
</td>
|
||
</tr>
|
||
<!-- Rule Row: Rigging -->
|
||
<tr class="rule-row bg-white border border-outline-variant rounded-lg transition-colors hover:bg-surface-container-low group">
|
||
<td class="px-4 py-4 font-semibold text-body-base">리깅(Rigging) 높이</td>
|
||
<td class="px-4 py-4 text-center text-body-sm font-medium">6.5–8.5m</td>
|
||
<td class="px-4 py-4 text-on-surface-variant font-body-sm">
|
||
<div class="flex items-center gap-1">
|
||
<span class="material-symbols-outlined text-sm text-secondary">info</span>
|
||
구조계산서 제출 (D-7)
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-4">
|
||
<span class="status-badge bg-surface-container-highest text-on-surface">경고</span>
|
||
</td>
|
||
<td class="px-4 py-4 text-right">
|
||
<button class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">settings</button>
|
||
</td>
|
||
</tr>
|
||
<!-- Rule Row: Double Floor -->
|
||
<tr class="rule-row bg-white border border-outline-variant rounded-lg transition-colors hover:bg-surface-container-low group">
|
||
<td class="px-4 py-4 font-semibold text-body-base">복층 부스</td>
|
||
<td class="px-4 py-4 text-center text-body-sm font-medium">≤ 1/2 면적</td>
|
||
<td class="px-4 py-4 text-on-surface-variant font-body-sm">전체 점유 면적 대비 기준</td>
|
||
<td class="px-4 py-4">
|
||
<span class="status-badge bg-error-container text-on-error-container">차단</span>
|
||
</td>
|
||
<td class="px-4 py-4 text-right">
|
||
<button class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">settings</button>
|
||
</td>
|
||
</tr>
|
||
<!-- Rule Row: Fire Proof -->
|
||
<tr class="rule-row bg-white border border-outline-variant rounded-lg transition-colors hover:bg-surface-container-low group">
|
||
<td class="px-4 py-4 font-semibold text-body-base">방염 성능</td>
|
||
<td class="px-4 py-4 text-center text-body-sm font-medium">방염필증 필수</td>
|
||
<td class="px-4 py-4 text-on-surface-variant font-body-sm">모든 목재 및 가연성 자재</td>
|
||
<td class="px-4 py-4">
|
||
<span class="status-badge bg-error-container text-on-error-container">차단</span>
|
||
</td>
|
||
<td class="px-4 py-4 text-right">
|
||
<button class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">settings</button>
|
||
</td>
|
||
</tr>
|
||
<!-- Rule Row: Noise -->
|
||
<tr class="rule-row bg-white border border-outline-variant rounded-lg transition-colors hover:bg-surface-container-low group">
|
||
<td class="px-4 py-4 font-semibold text-body-base">소음 규정</td>
|
||
<td class="px-4 py-4 text-center text-body-sm font-medium">70–75dB</td>
|
||
<td class="px-4 py-4 text-on-surface-variant font-body-sm">상시 모니터링 기준</td>
|
||
<td class="px-4 py-4">
|
||
<span class="status-badge bg-surface-container-highest text-on-surface">경고</span>
|
||
</td>
|
||
<td class="px-4 py-4 text-right">
|
||
<button class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">settings</button>
|
||
</td>
|
||
</tr>
|
||
<!-- Rule Row: Distance -->
|
||
<tr class="rule-row bg-white border border-outline-variant rounded-lg transition-colors hover:bg-surface-container-low group">
|
||
<td class="px-4 py-4 font-semibold text-body-base">이격 거리</td>
|
||
<td class="px-4 py-4 text-center text-body-sm font-medium">벽체 30 / 천장 60</td>
|
||
<td class="px-4 py-4 text-on-surface-variant font-body-sm">단위: cm, 소방 통로 확보</td>
|
||
<td class="px-4 py-4">
|
||
<span class="status-badge bg-surface-container-highest text-on-surface">경고</span>
|
||
</td>
|
||
<td class="px-4 py-4 text-right">
|
||
<button class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">settings</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- Footer Actions -->
|
||
<div class="px-container-padding py-gutter bg-white border-t border-outline-variant flex justify-end gap-3">
|
||
<button class="px-6 py-2.5 rounded-lg font-label-md text-on-surface-variant hover:bg-surface-container transition-colors border border-outline-variant">
|
||
임시 저장
|
||
</button>
|
||
<button class="px-8 py-2.5 bg-primary text-white rounded-lg font-label-md hover:brightness-110 shadow-lg shadow-primary/20 transition-all active:scale-[0.98]">
|
||
저장 및 배포
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
<!-- Micro-interaction Script -->
|
||
<script>
|
||
const diffBtn = document.getElementById('diff-toggle');
|
||
const targetInput = document.querySelector('.diff-highlight-target');
|
||
let isDiffActive = false;
|
||
|
||
diffBtn.addEventListener('click', () => {
|
||
isDiffActive = !isDiffActive;
|
||
|
||
if (isDiffActive) {
|
||
diffBtn.classList.add('ring-2', 'ring-secondary', 'ring-offset-2');
|
||
targetInput.classList.add('diff-highlight');
|
||
// Simulate "before" text appearing
|
||
const beforeTag = document.createElement('span');
|
||
beforeTag.id = 'diff-tag';
|
||
beforeTag.innerHTML = '<span class="text-error line-through text-[10px] block opacity-60">4m</span>';
|
||
targetInput.parentElement.prepend(beforeTag);
|
||
} else {
|
||
diffBtn.classList.remove('ring-2', 'ring-secondary', 'ring-offset-2');
|
||
targetInput.classList.remove('diff-highlight');
|
||
const tag = document.getElementById('diff-tag');
|
||
if (tag) tag.remove();
|
||
}
|
||
});
|
||
|
||
// Hover animation for sidebar items
|
||
document.querySelectorAll('aside nav a').forEach(item => {
|
||
item.addEventListener('mouseenter', () => {
|
||
if(!item.classList.contains('bg-secondary-container')) {
|
||
item.style.transform = 'translateX(4px)';
|
||
}
|
||
});
|
||
item.addEventListener('mouseleave', () => {
|
||
item.style.transform = 'translateX(0)';
|
||
});
|
||
});
|
||
</script>
|
||
</body></html> |