270 lines
18 KiB
HTML
270 lines
18 KiB
HTML
<html lang="ko" vid="0"><head vid="1">
|
|
<meta charset="UTF-8" vid="2">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" vid="3">
|
|
<title vid="4">Eroom AI Partners - 신규 작업실 생성</title>
|
|
<script src="https://cdn.tailwindcss.com/3.4.17" vid="5"></script>
|
|
<script src="https://unpkg.com/@phosphor-icons/web" vid="6"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" vid="7">
|
|
<style vid="8">
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f5f9;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #cbd5e1;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #94a3b8;
|
|
}
|
|
</style>
|
|
<script vid="9">
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
brand: {
|
|
50: '#fdf3f6',
|
|
100: '#fbe5ec',
|
|
200: '#f7cddb',
|
|
300: '#f0a8c0',
|
|
400: '#e57a9e',
|
|
500: '#d5537f',
|
|
600: '#bd3763',
|
|
700: '#9d284e',
|
|
800: '#8b1e3f',
|
|
900: '#731d38',
|
|
950: '#400b1b',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-800 h-screen w-screen overflow-hidden flex flex-col antialiased" vid="10">
|
|
|
|
|
|
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 shrink-0 z-20 shadow-sm relative" vid="11">
|
|
|
|
<div class="flex items-center gap-3 w-64 cursor-pointer" vid="12">
|
|
<div class="w-8 h-8 rounded-lg bg-brand-800 flex items-center justify-center shadow-inner" vid="13">
|
|
<i class="ph-bold ph-scales text-white text-lg" vid="14"></i>
|
|
</div>
|
|
<span class="font-bold text-xl tracking-tight text-gray-900" vid="15">Eroom AI <span class="text-brand-800" vid="16">Partners</span></span>
|
|
</div>
|
|
|
|
|
|
<div class="absolute left-1/2 transform -translate-x-1/2 flex items-center gap-2" vid="17">
|
|
<i class="ph-fill ph-scales text-brand-800 text-xl" vid="18"></i>
|
|
<h1 class="text-lg font-semibold text-gray-900" vid="19">김변호사의 작업 공간</h1>
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center gap-4 w-64 justify-end" vid="20">
|
|
<button class="p-2 text-gray-500 hover:text-brand-800 hover:bg-brand-50 rounded-full transition-colors relative" vid="21">
|
|
<i class="ph ph-bell text-xl" vid="22"></i>
|
|
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-brand-500 rounded-full border border-white" vid="23"></span>
|
|
</button>
|
|
<div class="h-8 w-px bg-gray-200 mx-1" vid="24"></div>
|
|
<div class="flex items-center gap-3 cursor-pointer hover:bg-gray-50 py-1.5 px-3 rounded-xl transition-all border border-transparent hover:border-gray-200" vid="25">
|
|
<div class="flex flex-col text-right" vid="26">
|
|
<span class="text-sm font-semibold text-gray-900 leading-tight" vid="27">김대표 변호사</span>
|
|
<span class="text-xs text-brand-800 font-medium" vid="28">파트너</span>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-full bg-brand-100 border border-brand-200 flex items-center justify-center text-brand-800 font-bold text-lg shadow-sm" vid="29">
|
|
김
|
|
</div>
|
|
<i class="ph ph-caret-down text-gray-400 text-sm" vid="30"></i>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<div class="flex flex-1 overflow-hidden h-full" vid="31">
|
|
|
|
|
|
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col shrink-0 shadow-[4px_0_24px_rgba(0,0,0,0.02)] z-10" vid="32">
|
|
<div class="p-6 flex-1 flex flex-col" vid="33">
|
|
<nav class="space-y-1.5" vid="34">
|
|
|
|
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium transition-colors group" vid="35">
|
|
<i class="ph ph-squares-four text-xl group-hover:text-brand-800 transition-colors" vid="36"></i>
|
|
<span vid="37">모든 작업실</span>
|
|
<span class="ml-auto bg-gray-100 text-gray-600 py-0.5 px-2 rounded-full text-xs font-bold group-hover:bg-brand-100 group-hover:text-brand-800 transition-colors" vid="38">8</span>
|
|
</a>
|
|
|
|
|
|
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium transition-colors group" vid="39">
|
|
<i class="ph ph-star text-xl group-hover:text-amber-500 transition-colors" vid="40"></i>
|
|
<span vid="41">중요 작업실</span>
|
|
</a>
|
|
|
|
|
|
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium transition-colors group" vid="42">
|
|
<i class="ph ph-users text-xl group-hover:text-blue-500 transition-colors" vid="43"></i>
|
|
<span vid="44">공유 작업실</span>
|
|
</a>
|
|
|
|
|
|
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium transition-colors group" vid="45">
|
|
<i class="ph ph-clock text-xl group-hover:text-green-500 transition-colors" vid="46"></i>
|
|
<span vid="47">최근 작업실</span>
|
|
</a>
|
|
|
|
|
|
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium transition-colors group" vid="48">
|
|
<i class="ph ph-folders text-xl group-hover:text-brand-600 transition-colors" vid="49"></i>
|
|
<span vid="50">종류별 작업실</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="mt-auto pt-6 border-t border-gray-100" vid="51">
|
|
|
|
<button class="w-full flex items-center justify-center gap-2 bg-brand-800 text-white px-4 py-3.5 rounded-xl font-medium transition-all shadow-md shadow-brand-800/20 ring-2 ring-offset-2 ring-brand-800/50" vid="52">
|
|
<i class="ph-bold ph-plus text-lg" vid="53"></i>
|
|
<span vid="54">신규 작업실 생성</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto bg-[#F8F9FA] p-8" vid="55">
|
|
<div class="max-w-5xl mx-auto" vid="56">
|
|
|
|
|
|
<div class="mb-8" vid="57">
|
|
<button class="flex items-center gap-2 text-gray-500 hover:text-brand-800 transition-colors mb-4" vid="58">
|
|
<i class="ph ph-arrow-left text-lg" vid="59"></i>
|
|
<span class="text-sm font-medium" vid="60">돌아가기</span>
|
|
</button>
|
|
<h2 class="text-2xl font-bold text-gray-900 tracking-tight" vid="61">어떤 종류의 작업실을 만드시겠습니까?</h2>
|
|
<p class="text-sm text-gray-500 mt-2" vid="62">진행하실 사건 또는 업무 유형에 맞는 AI 에이전트를 선택해주세요.</p>
|
|
</div>
|
|
|
|
|
|
<div class="grid grid-cols-2 gap-6" vid="63">
|
|
|
|
|
|
<div class="group bg-white rounded-2xl border border-gray-200 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(139,30,63,0.08)] hover:border-brand-800/30 transition-all duration-300 cursor-pointer flex flex-col h-[220px] relative overflow-hidden" vid="64">
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-brand-800 opacity-0 group-hover:opacity-100 transition-opacity" vid="65"></div>
|
|
<div class="flex justify-between items-start mb-4" vid="66">
|
|
<div class="flex items-center gap-4" vid="67">
|
|
<div class="w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center group-hover:bg-blue-100 transition-colors" vid="68">
|
|
<i class="ph-fill ph-scales text-3xl text-blue-600" vid="69"></i>
|
|
</div>
|
|
<div vid="70">
|
|
<h3 class="text-xl font-bold text-gray-900 group-hover:text-brand-800 transition-colors" vid="71">Liti-Agent 민사소송 원고대리</h3>
|
|
<div class="flex gap-2 mt-1.5" vid="72">
|
|
<span class="inline-block px-2 py-0.5 bg-blue-100 text-blue-700 text-xs font-semibold rounded-md" vid="73">민사</span>
|
|
<span class="inline-block px-2 py-0.5 bg-gray-100 text-gray-600 text-xs font-medium rounded-md" vid="74">원고</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-[15px] text-gray-600 leading-relaxed mt-2 flex-1" vid="75">
|
|
민사소송 원고측 대리를 위한 전용 에이전트입니다. 소장 작성 지원, 증거 자료 분석 및 청구 원인 구성을 도와줍니다.
|
|
</p>
|
|
<div class="mt-4 pt-4 border-t border-gray-100 flex justify-end opacity-0 group-hover:opacity-100 transition-opacity" vid="76">
|
|
<button class="text-brand-800 font-semibold text-sm flex items-center gap-1" vid="77">
|
|
선택하기 <i class="ph-bold ph-arrow-right" vid="78"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="group bg-white rounded-2xl border border-gray-200 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(139,30,63,0.08)] hover:border-brand-800/30 transition-all duration-300 cursor-pointer flex flex-col h-[220px] relative overflow-hidden" vid="79">
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-brand-800 opacity-0 group-hover:opacity-100 transition-opacity" vid="80"></div>
|
|
<div class="flex justify-between items-start mb-4" vid="81">
|
|
<div class="flex items-center gap-4" vid="82">
|
|
<div class="w-14 h-14 bg-indigo-50 rounded-xl flex items-center justify-center group-hover:bg-indigo-100 transition-colors" vid="83">
|
|
<i class="ph-fill ph-scales text-3xl text-indigo-600" vid="84"></i>
|
|
</div>
|
|
<div vid="85">
|
|
<h3 class="text-xl font-bold text-gray-900 group-hover:text-brand-800 transition-colors" vid="86">Liti-Agent 민사소송 피고대리</h3>
|
|
<div class="flex gap-2 mt-1.5" vid="87">
|
|
<span class="inline-block px-2 py-0.5 bg-indigo-100 text-indigo-700 text-xs font-semibold rounded-md" vid="88">민사</span>
|
|
<span class="inline-block px-2 py-0.5 bg-gray-100 text-gray-600 text-xs font-medium rounded-md" vid="89">피고</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-[15px] text-gray-600 leading-relaxed mt-2 flex-1" vid="90">
|
|
민사소송 피고측 대리를 위한 전용 에이전트입니다. 답변서 작성 지원, 원고 청구 반박 논리 개발 및 항변 사유 분석을 제공합니다.
|
|
</p>
|
|
<div class="mt-4 pt-4 border-t border-gray-100 flex justify-end opacity-0 group-hover:opacity-100 transition-opacity" vid="91">
|
|
<button class="text-brand-800 font-semibold text-sm flex items-center gap-1" vid="92">
|
|
선택하기 <i class="ph-bold ph-arrow-right" vid="93"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="group bg-white rounded-2xl border border-gray-200 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(139,30,63,0.08)] hover:border-brand-800/30 transition-all duration-300 cursor-pointer flex flex-col h-[220px] relative overflow-hidden" vid="94">
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-brand-800 opacity-0 group-hover:opacity-100 transition-opacity" vid="95"></div>
|
|
<div class="flex justify-between items-start mb-4" vid="96">
|
|
<div class="flex items-center gap-4" vid="97">
|
|
<div class="w-14 h-14 bg-rose-50 rounded-xl flex items-center justify-center group-hover:bg-rose-100 transition-colors" vid="98">
|
|
<i class="ph-fill ph-gavel text-3xl text-rose-600" vid="99"></i>
|
|
</div>
|
|
<div vid="100">
|
|
<h3 class="text-xl font-bold text-gray-900 group-hover:text-brand-800 transition-colors" vid="101">Liti-Agent 형사소송 피고대리</h3>
|
|
<div class="flex gap-2 mt-1.5" vid="102">
|
|
<span class="inline-block px-2 py-0.5 bg-rose-100 text-rose-700 text-xs font-semibold rounded-md" vid="103">형사</span>
|
|
<span class="inline-block px-2 py-0.5 bg-gray-100 text-gray-600 text-xs font-medium rounded-md" vid="104">피의자/피고인</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-[15px] text-gray-600 leading-relaxed mt-2 flex-1" vid="105">
|
|
형사 사건 방어를 위한 전용 에이전트입니다. 수사 기록 분석, 변호인 의견서 작성 지원 및 무죄/양형 주장 논리를 구성합니다.
|
|
</p>
|
|
<div class="mt-4 pt-4 border-t border-gray-100 flex justify-end opacity-0 group-hover:opacity-100 transition-opacity" vid="106">
|
|
<button class="text-brand-800 font-semibold text-sm flex items-center gap-1" vid="107">
|
|
선택하기 <i class="ph-bold ph-arrow-right" vid="108"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="group bg-white rounded-2xl border border-gray-200 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(139,30,63,0.08)] hover:border-brand-800/30 transition-all duration-300 cursor-pointer flex flex-col h-[220px] relative overflow-hidden" vid="109">
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-brand-800 opacity-0 group-hover:opacity-100 transition-opacity" vid="110"></div>
|
|
<div class="flex justify-between items-start mb-4" vid="111">
|
|
<div class="flex items-center gap-4" vid="112">
|
|
<div class="w-14 h-14 bg-emerald-50 rounded-xl flex items-center justify-center group-hover:bg-emerald-100 transition-colors" vid="113">
|
|
<i class="ph-fill ph-handshake text-3xl text-emerald-600" vid="114"></i>
|
|
</div>
|
|
<div vid="115">
|
|
<h3 class="text-xl font-bold text-gray-900 group-hover:text-brand-800 transition-colors" vid="116">Litcon-Agent 법률자문</h3>
|
|
<div class="flex gap-2 mt-1.5" vid="117">
|
|
<span class="inline-block px-2 py-0.5 bg-emerald-100 text-emerald-700 text-xs font-semibold rounded-md" vid="118">자문</span>
|
|
<span class="inline-block px-2 py-0.5 bg-gray-100 text-gray-600 text-xs font-medium rounded-md" vid="119">계약/컴플라이언스</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-[15px] text-gray-600 leading-relaxed mt-2 flex-1" vid="120">
|
|
법률 자문 및 계약서 검토를 위한 전용 에이전트입니다. 계약서 독소조항 추출, 법률 리서치 및 자문 의견서 초안을 작성합니다.
|
|
</p>
|
|
<div class="mt-4 pt-4 border-t border-gray-100 flex justify-end opacity-0 group-hover:opacity-100 transition-opacity" vid="121">
|
|
<button class="text-brand-800 font-semibold text-sm flex items-center gap-1" vid="122">
|
|
선택하기 <i class="ph-bold ph-arrow-right" vid="123"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
|
|
</body></html> |