224 lines
13 KiB
HTML
224 lines
13 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">Liti-Agent 민사소송 원고대리 - 작업실 07</title>
|
|
<script src="https://cdn.tailwindcss.com/3.4.17" vid="5"></script>
|
|
<style vid="6">
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
|
|
body {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
background-color: #F8FAFC;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #CBD5E1;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #94A3B8;
|
|
}
|
|
</style>
|
|
<script vid="7">
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
eroom: {
|
|
accent: '#8B1E3F',
|
|
light: '#F4E8EB',
|
|
dark: '#6A1630'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="w-screen h-screen overflow-hidden flex flex-col p-4 gap-4 text-slate-800" vid="8">
|
|
|
|
|
|
<header class="w-full h-16 shrink-0 bg-gradient-to-r from-red-600 via-rose-500 to-eroom-accent rounded-xl shadow-md flex items-center justify-between px-6 text-white relative overflow-hidden" vid="9">
|
|
|
|
<div class="absolute top-0 left-0 w-full h-1/2 bg-white/10" vid="10"></div>
|
|
|
|
|
|
<div class="flex items-center gap-4 relative z-10" vid="11">
|
|
<button class="p-2 hover:bg-white/20 rounded-full transition-colors flex items-center justify-center" vid="12">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" vid="13">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 19l-7-7m0 0l7-7m-7 7h18" vid="14"></path>
|
|
</svg>
|
|
</button>
|
|
<div class="flex items-center gap-2 font-bold text-lg tracking-tight" vid="15">
|
|
<div class="w-6 h-6 bg-white rounded flex items-center justify-center text-eroom-accent text-xs" vid="16">E</div>
|
|
<span vid="17">Eroom AI Partners</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="absolute left-1/2 -translate-x-1/2 flex items-center gap-3 relative z-10" vid="18">
|
|
<span class="text-2xl drop-shadow-sm" vid="19">⚖️</span>
|
|
<h1 class="text-xl font-bold tracking-wide drop-shadow-sm" vid="20">Liti-Agent 민사소송 원고대리 - 작업실 07</h1>
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center gap-4 relative z-10" vid="21">
|
|
<div class="flex items-center gap-3 bg-white/10 px-3 py-1.5 rounded-full border border-white/20" vid="22">
|
|
<div class="w-7 h-7 bg-white text-eroom-accent rounded-full flex items-center justify-center font-bold text-sm" vid="23">
|
|
김
|
|
</div>
|
|
<span class="text-sm font-medium" vid="24">김변호사님</span>
|
|
</div>
|
|
<button class="p-2 hover:bg-white/20 rounded-full transition-colors" vid="25">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" vid="26">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" vid="27"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" vid="28"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<div class="flex-1 flex gap-4 min-h-0" vid="29">
|
|
|
|
|
|
<aside class="w-[280px] shrink-0 bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden" vid="30">
|
|
|
|
|
|
<div class="p-5 flex flex-col gap-3 shrink-0 bg-slate-50 border-b border-slate-200" vid="31">
|
|
<button class="w-full flex items-center justify-between p-3.5 bg-white border border-slate-200 rounded-lg shadow-[0_2px_4px_rgba(0,0,0,0.02)] hover:border-slate-300 hover:shadow-md transition-all group" vid="32">
|
|
<div class="flex items-center gap-3" vid="33">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-400 group-hover:text-amber-500 transition-colors" viewBox="0 0 20 20" fill="currentColor" vid="34">
|
|
<path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" vid="35"></path>
|
|
</svg>
|
|
<span class="font-medium text-slate-700" vid="36">고객상담문서 폴더</span>
|
|
</div>
|
|
</button>
|
|
|
|
<button class="w-full flex items-center justify-between p-3.5 bg-white border border-slate-200 rounded-lg shadow-[0_2px_4px_rgba(0,0,0,0.02)] hover:border-slate-300 hover:shadow-md transition-all group" vid="37">
|
|
<div class="flex items-center gap-3" vid="38">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-400 group-hover:text-amber-500 transition-colors" viewBox="0 0 20 20" fill="currentColor" vid="39">
|
|
<path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" vid="40"></path>
|
|
</svg>
|
|
<span class="font-medium text-slate-700" vid="41">증거문서 폴더</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
|
|
<div class="flex-1 flex flex-col p-5 overflow-y-auto" vid="42">
|
|
<div class="border-b border-slate-300 pb-2 mb-4" vid="43">
|
|
<h2 class="text-base font-bold text-slate-800 tracking-tight" vid="44">에이전트 생성 결과물</h2>
|
|
</div>
|
|
|
|
<ul class="flex flex-col gap-1" vid="45">
|
|
|
|
<li vid="46">
|
|
<button class="w-full flex items-center justify-between p-3 rounded-lg bg-eroom-light border border-eroom-accent/20 text-eroom-accent group" vid="47">
|
|
<span class="font-bold" vid="48">1단계 결과물</span>
|
|
<div class="w-2 h-2 rounded-full bg-eroom-accent" vid="49"></div>
|
|
</button>
|
|
</li>
|
|
|
|
|
|
<li vid="50">
|
|
<button class="w-full flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 border border-transparent hover:border-slate-200 text-slate-600 transition-colors group" vid="51">
|
|
<span class="font-medium" vid="52">2단계 결과물</span>
|
|
</button>
|
|
</li>
|
|
|
|
|
|
<li vid="53">
|
|
<button class="w-full flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 border border-transparent hover:border-slate-200 text-slate-600 transition-colors group" vid="54">
|
|
<span class="font-medium" vid="55">3단계 결과물</span>
|
|
</button>
|
|
</li>
|
|
|
|
|
|
<li vid="56">
|
|
<button class="w-full flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 border border-transparent hover:border-slate-200 text-slate-600 transition-colors group" vid="57">
|
|
<span class="font-medium" vid="58">4단계 결과물</span>
|
|
</button>
|
|
</li>
|
|
|
|
|
|
<li vid="59">
|
|
<button class="w-full flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 border border-transparent hover:border-slate-200 text-slate-600 transition-colors group" vid="60">
|
|
<span class="font-medium" vid="61">5단계 결과물</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
|
|
|
|
<main class="flex-1 flex flex-col gap-4 min-w-0" vid="62">
|
|
|
|
|
|
<div class="h-[72px] shrink-0 bg-white rounded-xl border border-slate-200 shadow-sm flex items-center justify-between px-6" vid="63">
|
|
|
|
<div class="border border-slate-200 bg-slate-50 px-4 py-2 rounded-lg shadow-inner" vid="64">
|
|
<span class="font-bold text-slate-800" vid="65">1단계 - 사건개요 파악</span>
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center gap-4" vid="66">
|
|
<span class="font-bold text-slate-700" vid="67">진행률</span>
|
|
<div class="w-[320px] h-[22px] bg-white border-2 border-slate-800 rounded-full p-0.5 relative overflow-hidden" vid="68">
|
|
|
|
<div class="h-full bg-gradient-to-r from-red-500 to-eroom-accent rounded-full w-[15%] transition-all duration-1000 relative" vid="69">
|
|
|
|
<div class="absolute inset-0 bg-[linear-gradient(45deg,rgba(255,255,255,0.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.15)_50%,rgba(255,255,255,0.15)_75%,transparent_75%,transparent)] bg-[length:1rem_1rem]" vid="70"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="flex-1 bg-white rounded-xl border border-slate-200 shadow-sm relative overflow-hidden flex flex-col" vid="71">
|
|
|
|
<div class="h-1 w-full bg-slate-100" vid="72"></div>
|
|
|
|
|
|
<div class="flex-1 p-8 flex flex-col items-center" vid="73">
|
|
|
|
|
|
<div class="bg-white border-2 border-slate-800 rounded-xl px-8 py-3 shadow-[4px_4px_0px_rgba(15,23,42,0.1)] flex items-center justify-center gap-3 max-w-2xl transform hover:-translate-y-0.5 transition-transform duration-200 cursor-default" vid="74">
|
|
<div class="flex gap-1 items-center" vid="75">
|
|
<span class="w-2 h-2 rounded-full bg-eroom-accent animate-pulse" vid="76"></span>
|
|
<span class="w-2 h-2 rounded-full bg-eroom-accent animate-pulse" style="animation-delay: 150ms;" vid="77"></span>
|
|
<span class="w-2 h-2 rounded-full bg-eroom-accent animate-pulse" style="animation-delay: 300ms;" vid="78"></span>
|
|
</div>
|
|
<span class="font-bold text-slate-800 text-lg" vid="79">현재 사건개요 분석 작업을 진행 중입니다.</span>
|
|
</div>
|
|
|
|
|
|
<div class="flex-1 w-full flex flex-col items-center justify-center text-slate-400 gap-4 mt-12" vid="80">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-slate-200 animate-spin-slow" fill="none" viewBox="0 0 24 24" stroke="currentColor" vid="81">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" vid="82"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" vid="83"></path>
|
|
</svg>
|
|
<p class="text-sm font-medium" vid="84">에이전트가 문서를 검토하고 있습니다...</p>
|
|
|
|
|
|
<div class="w-full max-w-3xl mt-8 space-y-4 opacity-30" vid="85">
|
|
<div class="h-4 bg-slate-200 rounded w-3/4" vid="86"></div>
|
|
<div class="h-4 bg-slate-200 rounded w-full" vid="87"></div>
|
|
<div class="h-4 bg-slate-200 rounded w-5/6" vid="88"></div>
|
|
<div class="h-4 bg-slate-200 rounded w-1/2" vid="89"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
|
|
</body></html> |