363 lines
22 KiB
HTML
363 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html 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;600;700;900&family=Geist:wght@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": {
|
|
"tertiary-fixed-dim": "#72daa9",
|
|
"surface-dim": "#d3d9f1",
|
|
"on-error": "#ffffff",
|
|
"secondary-fixed": "#e5deff",
|
|
"on-tertiary-fixed-variant": "#005236",
|
|
"surface-container-low": "#f2f3ff",
|
|
"surface-container": "#eaedff",
|
|
"inverse-primary": "#a2c9ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-tertiary-container": "#68d1a0",
|
|
"outline-variant": "#c2c7d1",
|
|
"on-primary": "#ffffff",
|
|
"on-secondary-container": "#f3edff",
|
|
"tertiary-fixed": "#8ef7c4",
|
|
"inverse-surface": "#293042",
|
|
"tertiary": "#003e28",
|
|
"inverse-on-surface": "#eef0ff",
|
|
"on-tertiary-fixed": "#002113",
|
|
"surface-tint": "#24609e",
|
|
"on-primary-fixed": "#001c38",
|
|
"primary-fixed": "#d3e4ff",
|
|
"surface-container-highest": "#dbe2fa",
|
|
"secondary": "#5427e6",
|
|
"error-red": "#ba1a1a",
|
|
"surface-variant": "#dbe2fa",
|
|
"on-secondary-fixed": "#1b0063",
|
|
"on-error-container": "#93000a",
|
|
"primary": "#003765",
|
|
"tertiary-container": "#00583b",
|
|
"on-secondary": "#ffffff",
|
|
"on-primary-container": "#91c0ff",
|
|
"secondary-fixed-dim": "#c9bfff",
|
|
"on-background": "#141b2c",
|
|
"surface": "#faf8ff",
|
|
"on-surface": "#141b2c",
|
|
"on-secondary-fixed-variant": "#4500d8",
|
|
"surface-bright": "#f9f9ff",
|
|
"error-container": "#ffdad6",
|
|
"secondary-container": "#6d4aff",
|
|
"background": "#faf8ff",
|
|
"on-primary-fixed-variant": "#004881",
|
|
"on-tertiary": "#ffffff",
|
|
"on-surface-variant": "#424750",
|
|
"surface-container-high": "#e1e7ff",
|
|
"primary-fixed-dim": "#a2c9ff",
|
|
"outline": "#727781",
|
|
"primary-container": "#004e8b",
|
|
"error": "#ba1a1a"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"base": "4px",
|
|
"stack-sm": "8px",
|
|
"section-padding": "96px",
|
|
"stack-lg": "24px",
|
|
"stack-md": "16px",
|
|
"gutter": "16px",
|
|
"container-padding": "24px"
|
|
},
|
|
"fontFamily": {
|
|
"display-lg": ["Inter"],
|
|
"body-sm": ["Inter"],
|
|
"title-sm": ["Inter"],
|
|
"label-xs": ["Geist"],
|
|
"label-md": ["Geist"],
|
|
"headline-md": ["Inter"],
|
|
"body-base": ["Inter"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; }
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
.message-active { border-left: 4px solid #003765; background-color: #f2f3ff; }
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #dbe2fa; border-radius: 10px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #c2c7d1; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface-bright text-on-surface overflow-hidden h-screen flex flex-col">
|
|
<!-- Top AppBar -->
|
|
<header class="bg-primary dark:bg-primary-container text-on-primary dark:text-on-primary-container flex justify-between items-center w-full px-container-padding h-16 shadow-md z-30">
|
|
<div class="flex items-center gap-stack-md">
|
|
<span class="font-title-sm text-title-sm font-bold text-on-primary">KINTEX AI 전시관리</span>
|
|
</div>
|
|
<div class="flex items-center gap-stack-md">
|
|
<div class="relative flex items-center bg-primary-container/20 rounded-full px-4 py-1.5 border border-on-primary/20">
|
|
<span class="material-symbols-outlined text-[20px] mr-2">search</span>
|
|
<input class="bg-transparent border-none focus:ring-0 text-label-md font-label-md placeholder:text-on-primary-fixed-variant w-48" placeholder="통합 검색..." type="text"/>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button class="p-2 hover:bg-primary-container/20 transition-colors rounded-full"><span class="material-symbols-outlined">notifications</span></button>
|
|
<button class="p-2 hover:bg-primary-container/20 transition-colors rounded-full"><span class="material-symbols-outlined">settings</span></button>
|
|
<button class="p-2 hover:bg-primary-container/20 transition-colors rounded-full"><span class="material-symbols-outlined">help</span></button>
|
|
</div>
|
|
<div class="h-8 w-8 rounded-full bg-surface-container-highest overflow-hidden border border-on-primary/20">
|
|
<img class="w-full h-full object-cover" data-alt="A professional headshot of a middle-aged Korean businesswoman with glasses and a friendly, confident expression, captured against a clean professional blue background in high definition photography style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC5rKqg2BdLb7_vCTJoBxVXmCmPoytY9hx4E_7SfcwPO2bohMXp3cfqiRMWBp3sbHEKgECduIF3LvN6lIRUQ1cIYE6WKe76wmo5BcVv-DpUVCux-pEiDiLgPnmVoH6ddUj_Aa3hYCcCvLS9_Vk2BDz5ZoEIo5XTiiwtrwTxJgnhciOl0Y8kZ-4UoFANSJv8UdVreCXEwqgEMw8j9p248uQkRUvzhLSaeAMSTtRiO0eYZ4JWa1a1OtbJ4rhT8OaZOOQUwKMu0gBD32s"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="flex flex-1 overflow-hidden">
|
|
<!-- Left SideNavBar (Main Navigation) -->
|
|
<aside class="fixed left-0 top-16 bottom-0 w-[240px] flex flex-col p-stack-md gap-stack-sm bg-surface-container-low dark:bg-surface-container-lowest border-r border-outline-variant z-20">
|
|
<div class="mb-stack-lg px-2 pt-2">
|
|
<img alt="KINTEX 로고" class="h-8 w-auto" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCJR_RAHfgu28C4f_aqO2MiJrSmrLanG4w4MMSTRHAcRC-l_R4Oz0nwfcIdloJ9sSAy5JY5mcb3owuBgr4LSVFJs-2RvIvx1bQCR1mh7M5VSjgbwnuHwIBMazmY62BBjKlYmudQX2p0-3u3FHiF8TJttFpEDaoPsTk4jb2w_Y5gy-1Mme5i3okR6uN7uz6uNmgKDXnUDOaIC5DSWb2OnpcU53duc64TKp9leFYNeaFfUXjc9oak30BFMiJLhqK1aCGtHHncUyq_VQM"/>
|
|
<p class="mt-4 font-headline-md text-headline-md text-primary font-black">전시관리 시스템</p>
|
|
<p class="font-label-md text-label-md text-on-surface-variant">KINTEX AI Admin</p>
|
|
</div>
|
|
<nav class="flex flex-col gap-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/50 rounded-xl transition-all group active:scale-95 duration-100" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
<span class="font-label-md text-label-md">대시보드</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/50 rounded-xl transition-all group active:scale-95 duration-100" href="#">
|
|
<span class="material-symbols-outlined">event</span>
|
|
<span class="font-label-md text-label-md">전시 일정</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container font-bold rounded-xl active:scale-95 duration-100" href="#">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">mail</span>
|
|
<span class="font-label-md text-label-md">쪽지</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/50 rounded-xl transition-all group active:scale-95 duration-100" href="#">
|
|
<span class="material-symbols-outlined">task</span>
|
|
<span class="font-label-md text-label-md">업무 관리</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/50 rounded-xl transition-all group active:scale-95 duration-100" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
<span class="font-label-md text-label-md">설정</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto flex flex-col gap-1 border-t border-outline-variant pt-stack-md">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-highest transition-all rounded-xl" href="#">
|
|
<span class="material-symbols-outlined">support_agent</span>
|
|
<span class="font-label-md text-label-md">지원센터</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-highest transition-all rounded-xl" href="#">
|
|
<span class="material-symbols-outlined">logout</span>
|
|
<span class="font-label-md text-label-md">로그아웃</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Sub-Navigation Rail & Messaging Panes -->
|
|
<main class="ml-[240px] flex w-full h-full bg-surface-container-lowest overflow-hidden">
|
|
<!-- Folder List Pane -->
|
|
<div class="w-64 border-r border-outline-variant flex flex-col bg-surface-container-low/30 h-full">
|
|
<div class="p-4 border-b border-outline-variant">
|
|
<button class="w-full bg-primary text-on-primary py-3 px-4 rounded-full flex items-center justify-center gap-2 font-label-md text-label-md shadow-md hover:bg-primary-container transition-colors active:scale-95">
|
|
<span class="material-symbols-outlined text-[20px]">edit_note</span>
|
|
쪽지 쓰기
|
|
</button>
|
|
</div>
|
|
<div class="p-2 overflow-y-auto">
|
|
<div class="space-y-1">
|
|
<a class="flex items-center justify-between px-3 py-2.5 bg-primary-container/10 text-primary rounded-lg font-bold group" href="#">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-[20px]">inbox</span>
|
|
<span class="text-body-base font-body-base">받은 쪽지함</span>
|
|
</div>
|
|
<span class="bg-primary text-on-primary text-[10px] px-2 py-0.5 rounded-full">12</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-variant/40 rounded-lg group transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">send</span>
|
|
<span class="text-body-base font-body-base">보낸 쪽지함</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-variant/40 rounded-lg group transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">draft</span>
|
|
<span class="text-body-base font-body-base">임시보관함</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-variant/40 rounded-lg group transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">report</span>
|
|
<span class="text-body-base font-body-base">스팸 쪽지함</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-variant/40 rounded-lg group transition-colors border-t border-outline-variant/30 mt-2" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">delete</span>
|
|
<span class="text-body-base font-body-base">휴지통</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Middle Message List Pane -->
|
|
<div class="w-96 border-r border-outline-variant flex flex-col h-full bg-white">
|
|
<div class="p-4 flex flex-col gap-3 border-b border-outline-variant">
|
|
<div class="relative">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-outline text-[18px]">search</span>
|
|
<input class="w-full pl-10 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-full text-body-sm font-body-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none" placeholder="쪽지 검색" type="text"/>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="px-3 py-1 bg-primary-container/20 text-primary border border-primary-container/30 rounded-full font-label-md text-label-md">전체</button>
|
|
<button class="px-3 py-1 hover:bg-surface-container text-on-surface-variant border border-outline-variant rounded-full font-label-md text-label-md">안읽음</button>
|
|
<button class="px-3 py-1 hover:bg-surface-container text-on-surface-variant border border-outline-variant rounded-full font-label-md text-label-md">중요</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto divide-y divide-outline-variant/50">
|
|
<!-- Message Item Active -->
|
|
<div class="p-4 cursor-pointer hover:bg-surface-container-low transition-colors message-active relative group">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<span class="font-bold text-on-surface text-body-base">박진우 본부장</span>
|
|
<span class="text-label-xs font-label-xs text-outline">오전 10:45</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<span class="w-2 h-2 bg-primary rounded-full"></span>
|
|
<h3 class="font-bold text-on-surface text-body-base truncate">2026 스마트팩토리 전시홀 배치 협의 건</h3>
|
|
</div>
|
|
<p class="text-body-sm font-body-sm text-on-surface-variant line-clamp-2">금일 오후 3시에 있을 전시홀 배치 관련하여 사전에 공유드린 도면...</p>
|
|
<div class="absolute right-4 bottom-4 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<span class="material-symbols-outlined text-outline hover:text-primary">star</span>
|
|
</div>
|
|
</div>
|
|
<!-- Message Item 2 -->
|
|
<div class="p-4 cursor-pointer hover:bg-surface-container-low transition-colors">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<span class="text-on-surface text-body-base font-semibold">김서연 과장</span>
|
|
<span class="text-label-xs font-label-xs text-outline">어제</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<span class="w-2 h-2 bg-transparent"></span>
|
|
<h3 class="text-on-surface text-body-base truncate">차주 보안 업체 계약 연장 관련 건</h3>
|
|
</div>
|
|
<p class="text-body-sm font-body-sm text-on-surface-variant line-clamp-2">보안 업체에서 전달받은 계약 연장 조건입니다. 확인 부탁드립...</p>
|
|
</div>
|
|
<!-- Message Item 3 -->
|
|
<div class="p-4 cursor-pointer hover:bg-surface-container-low transition-colors">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<span class="text-on-surface text-body-base font-semibold">정훈 팀장</span>
|
|
<span class="text-label-xs font-label-xs text-outline">10월 24일</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<span class="w-2 h-2 bg-transparent"></span>
|
|
<h3 class="text-on-surface text-body-base truncate">[공지] 제1전시장 환경 정비 안내</h3>
|
|
</div>
|
|
<p class="text-body-sm font-body-sm text-on-surface-variant line-clamp-2">안녕하세요. 이번 주말 전시장 전체 청소 및 방역이 실시될 예정입니다...</p>
|
|
</div>
|
|
<!-- Message Item 4 -->
|
|
<div class="p-4 cursor-pointer hover:bg-surface-container-low transition-colors">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<span class="text-on-surface text-body-base font-semibold">이민재 대리</span>
|
|
<span class="text-label-xs font-label-xs text-outline">10월 23일</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<span class="w-2 h-2 bg-transparent"></span>
|
|
<h3 class="text-on-surface text-body-base truncate">VIP 케이터링 업체 제안서 송부</h3>
|
|
</div>
|
|
<p class="text-body-sm font-body-sm text-on-surface-variant line-clamp-2">차주 행사에 사용될 케이터링 업체 3곳의 제안서와 견적서 취합본입니...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Reading Pane -->
|
|
<div class="flex-1 flex flex-col h-full bg-white relative">
|
|
<!-- Message Header -->
|
|
<div class="px-8 py-6 border-b border-outline-variant">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<h1 class="text-headline-md font-headline-md text-on-surface">2026 스마트팩토리 전시홀 배치 협의 건</h1>
|
|
<div class="flex gap-2">
|
|
<button class="p-2 hover:bg-surface-container rounded-full text-on-surface-variant transition-colors"><span class="material-symbols-outlined">print</span></button>
|
|
<button class="p-2 hover:bg-surface-container rounded-full text-on-surface-variant transition-colors"><span class="material-symbols-outlined">delete</span></button>
|
|
<button class="p-2 hover:bg-surface-container rounded-full text-on-surface-variant transition-colors"><span class="material-symbols-outlined">more_vert</span></button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<img alt="박진우 본부장" class="w-12 h-12 rounded-full border border-outline-variant object-cover" src="https://lh3.googleusercontent.com/aida/AP1WRLsXFsekmPa77JGx0JMCs31rJ8hCsvn7xGfnRM9YyXX7chbyO5TIB8FjZBm5fuFcHrQrYs35rIMDAjOdQ7L5aS6UTo4NYut5TRziZbF74ZvNWLE74dsJn7t1r9a7q3Ix39o7yZfIRaOTvJrCAHxHopNa-re1XpQvCTPmq8Lv42KQOHH6nzp1ze0UtP0LbreAHgyKKhKyKztA-HxR1EaCG0tF47e0ojeYQQySFKsAjShPLTVV1GHZvv3aQa8"/>
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-bold text-on-surface text-body-base">박진우 본부장</span>
|
|
<span class="text-label-md font-label-md text-on-surface-variant bg-surface-container px-2 py-0.5 rounded">전시운영팀</span>
|
|
</div>
|
|
<p class="text-label-xs font-label-xs text-outline mt-1">2024년 10월 25일 오전 10:45 (받음)</p>
|
|
</div>
|
|
</div>
|
|
<button class="flex items-center gap-2 px-4 py-2 border border-outline rounded-lg font-label-md text-label-md text-on-surface-variant hover:bg-surface-container-low transition-colors">
|
|
<span class="material-symbols-outlined text-[18px]">reply</span>
|
|
답장
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Message Body -->
|
|
<div class="flex-1 px-8 py-8 overflow-y-auto text-body-base font-body-base text-on-surface leading-relaxed">
|
|
<p class="mb-4">안녕하세요, 운영팀의 박진우입니다.</p>
|
|
<p class="mb-4">내년 개최 예정인 '2026 스마트팩토리 엑스포'의 핵심 전시홀 배치와 관련하여 주요 부스 레이아웃 초안을 전달 드립니다.</p>
|
|
<p class="mb-4">이번 전시회는 기존보다 참가 기업 수가 15% 가량 증가할 것으로 예상되어, 관람객의 동선 혼잡을 방지하고 주요 글로벌 스폰서 업체들의 전시 공간을 전략적으로 배치하는 것이 관건입니다.</p>
|
|
<div class="bg-surface-container-low border-l-4 border-primary p-4 mb-4 rounded-r-lg">
|
|
<p class="font-bold mb-2">검토 요청 사항:</p>
|
|
<ul class="list-disc pl-5 space-y-1">
|
|
<li>제1전시장 A-E 구역 대형 부스 전력 공급 용량 확인</li>
|
|
<li>메인 로비 입구 측 네트워킹 라운지 배치 최적화</li>
|
|
<li>비상 탈출구 주변 여유 공간(3m 이상) 확보 여부</li>
|
|
</ul>
|
|
</div>
|
|
<p class="mb-4">첨부된 CAD 도면 파일을 확인해 주시고, 금일 오후 3시 회의 전까지 피드백 주시면 감사하겠습니다.</p>
|
|
<div class="mt-8 flex gap-4 p-4 border border-outline-variant rounded-xl bg-surface-bright">
|
|
<div class="w-12 h-12 bg-primary/10 rounded flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined">description</span>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="font-bold text-body-sm">2026_SmartFactory_Layout_V1.pdf</p>
|
|
<p class="text-label-xs text-outline">2.4 MB</p>
|
|
</div>
|
|
<button class="text-primary hover:underline font-label-md text-label-md">다운로드</button>
|
|
</div>
|
|
<p class="mt-8">감사합니다.<br/>박진우 드림</p>
|
|
</div>
|
|
<!-- Message Footer / Reply Area -->
|
|
<div class="p-6 border-t border-outline-variant bg-surface-container-lowest shadow-[0_-4px_10px_rgba(0,0,0,0.03)]">
|
|
<div class="border border-outline-variant rounded-xl overflow-hidden focus-within:border-primary transition-all">
|
|
<textarea class="w-full border-none focus:ring-0 p-4 text-body-base min-h-[100px] resize-none" placeholder="빠른 답장을 입력하세요..."></textarea>
|
|
<div class="bg-surface-container-low px-4 py-2 flex justify-between items-center">
|
|
<div class="flex gap-2">
|
|
<button class="p-1.5 hover:bg-surface-variant rounded text-on-surface-variant transition-colors"><span class="material-symbols-outlined text-[20px]">attach_file</span></button>
|
|
<button class="p-1.5 hover:bg-surface-variant rounded text-on-surface-variant transition-colors"><span class="material-symbols-outlined text-[20px]">image</span></button>
|
|
<button class="p-1.5 hover:bg-surface-variant rounded text-on-surface-variant transition-colors"><span class="material-symbols-outlined text-[20px]">mood</span></button>
|
|
</div>
|
|
<button class="bg-primary text-on-primary px-6 py-2 rounded-lg font-bold text-label-md shadow-sm hover:shadow-md transition-all active:scale-95">답장 보내기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<!-- Floating Atmosphere Elements -->
|
|
<div class="fixed bottom-6 right-6 z-50">
|
|
<button class="w-14 h-14 bg-secondary text-on-secondary rounded-full flex items-center justify-center shadow-xl hover:scale-110 active:scale-90 transition-all">
|
|
<span class="material-symbols-outlined text-[28px]">support_agent</span>
|
|
</button>
|
|
</div>
|
|
<script>
|
|
// Simple micro-interaction for marking messages as read or changing state
|
|
document.querySelectorAll('.cursor-pointer').forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
// Remove active class from all
|
|
document.querySelectorAll('.cursor-pointer').forEach(el => el.classList.remove('message-active'));
|
|
// Add to clicked
|
|
this.classList.add('message-active');
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |