165 lines
8.9 KiB
HTML
165 lines
8.9 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>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" vid="6">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" vid="7">
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap" rel="stylesheet" vid="8">
|
|
<script src="https://unpkg.com/lucide@latest" vid="9"></script>
|
|
<script vid="10">
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['"Noto Sans KR"', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
purple: '#8B1E3F',
|
|
dark: '#2A2C41',
|
|
hover: '#701832',
|
|
light: '#fdf5f8'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style vid="11">
|
|
body {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
background-color: #F8FAFC;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen flex flex-col antialiased text-gray-800" vid="12">
|
|
|
|
|
|
<header class="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6 lg:px-12 sticky top-0 z-10 w-full" vid="13">
|
|
<div class="flex items-center gap-4" vid="14">
|
|
|
|
<div class="flex items-center gap-2" vid="15">
|
|
<div class="w-8 h-8 rounded-full bg-brand-dark flex items-center justify-center text-white font-bold text-xl relative overflow-hidden" vid="16">
|
|
<span class="relative z-10 font-serif italic" vid="17">E</span>
|
|
|
|
<div class="absolute inset-0 border-[3px] border-[#a52a4e] rounded-full opacity-80 scale-75" vid="18"></div>
|
|
</div>
|
|
<span class="text-xl font-bold tracking-tight text-gray-900" vid="19">Eroom AI Partners</span>
|
|
</div>
|
|
|
|
<div class="h-5 w-[1px] bg-gray-300 mx-2 hidden sm:block" vid="20"></div>
|
|
|
|
<div class="hidden sm:flex items-center text-brand-purple font-medium bg-brand-light px-3 py-1 rounded-full text-sm" vid="21">
|
|
<i data-lucide="scale" class="w-4 h-4 mr-1.5" vid="22"></i>
|
|
법률 에이전트
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-6" vid="23">
|
|
<a href="#" class="text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors hidden md:block" vid="24">회사 소개</a>
|
|
<a href="#" class="text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors hidden md:block" vid="25">서비스</a>
|
|
<a href="#" class="text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors hidden md:block" vid="26">도입 문의</a>
|
|
<button class="text-sm font-medium text-brand-purple bg-brand-light px-4 py-2 rounded-md hover:bg-brand-purple hover:text-white transition-all duration-200 border border-brand-purple/20" vid="27">
|
|
메인 홈페이지
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<main class="flex-1 w-full flex flex-col items-center justify-center p-6 relative" vid="28">
|
|
|
|
<div class="absolute top-0 left-0 w-full h-1/2 bg-gradient-to-b from-white to-transparent -z-10" vid="29"></div>
|
|
|
|
|
|
<div class="w-full max-w-[440px] bg-white rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100 overflow-hidden" vid="30">
|
|
|
|
|
|
<div class="h-1.5 w-full bg-gradient-to-r from-brand-dark to-brand-purple" vid="31"></div>
|
|
|
|
<div class="p-8 sm:p-10" vid="32">
|
|
|
|
<div class="text-center mb-8" vid="33">
|
|
<div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-brand-light text-brand-purple mb-4" vid="34">
|
|
<i data-lucide="shield-check" class="w-6 h-6" vid="35"></i>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-gray-900 mb-2 tracking-tight" vid="36">법률 에이전트 로그인</h1>
|
|
<p class="text-sm text-gray-500" vid="37">전문가가 신뢰할 수 있는 실무형 AI 에이전트에 접속합니다.</p>
|
|
</div>
|
|
|
|
|
|
<form class="space-y-5" onsubmit="event.preventDefault();" vid="38">
|
|
|
|
|
|
<div class="space-y-1.5" vid="39">
|
|
<label for="id" class="block text-sm font-semibold text-gray-700" vid="40">
|
|
ID
|
|
</label>
|
|
<div class="relative" vid="41">
|
|
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-gray-400" vid="42">
|
|
<i data-lucide="user" class="w-5 h-5" vid="43"></i>
|
|
</div>
|
|
<input type="text" id="id" name="id" placeholder="아이디를 입력하세요" class="block w-full pl-11 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm transition-all duration-200 focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-purple/20 focus:border-brand-purple placeholder:text-gray-400 text-gray-900" required="" vid="44">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="space-y-1.5" vid="45">
|
|
<label for="password" class="block text-sm font-semibold text-gray-700" vid="46">
|
|
PASSWORD
|
|
</label>
|
|
<div class="relative" vid="47">
|
|
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-gray-400" vid="48">
|
|
<i data-lucide="lock" class="w-5 h-5" vid="49"></i>
|
|
</div>
|
|
<input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요" class="block w-full pl-11 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm transition-all duration-200 focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-purple/20 focus:border-brand-purple placeholder:text-gray-400 text-gray-900" required="" vid="50">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center justify-between pt-1 pb-2" vid="51">
|
|
<div class="flex items-center" vid="52">
|
|
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-brand-purple focus:ring-brand-purple bg-gray-50" vid="53">
|
|
<label for="remember-me" class="ml-2 block text-sm text-gray-600 cursor-pointer select-none" vid="54">
|
|
아이디 저장
|
|
</label>
|
|
</div>
|
|
<div class="text-sm" vid="55">
|
|
<a href="#" class="font-medium text-brand-purple hover:text-brand-hover hover:underline transition-colors" vid="56">
|
|
비밀번호를 잊으셨나요?
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<button type="submit" class="w-full flex justify-center py-3.5 px-4 border border-transparent rounded-xl shadow-sm text-base font-semibold text-white bg-brand-purple hover:bg-brand-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-purple transition-all duration-200" vid="57">
|
|
로그인하세요
|
|
</button>
|
|
</form>
|
|
|
|
|
|
<div class="mt-8 pt-6 border-t border-gray-100 text-center" vid="58">
|
|
<p class="text-sm text-gray-500" vid="59">
|
|
에이전트 사용 권한이 필요하신가요?
|
|
<a href="#" class="font-medium text-brand-dark hover:text-brand-purple hover:underline transition-colors ml-1" vid="60">
|
|
도입 문의하기
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="mt-12 text-center" vid="61">
|
|
<p class="text-xs text-gray-400 font-medium" vid="62">
|
|
© 2024 Eroom AI Partners. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</main>
|
|
|
|
|
|
<script vid="63">
|
|
lucide.createIcons();
|
|
</script>
|
|
|
|
</body></html> |