123 lines
7.6 KiB
HTML
123 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html class="dark" lang="ko"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>랜딩-마스터 관리자 로그인</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&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: {
|
|
"primary": "#135bec",
|
|
"background-light": "#f6f6f8",
|
|
"background-dark": "#101622",
|
|
"card-dark": "#1a2230",
|
|
"border-dark": "#2a3345",
|
|
},
|
|
fontFamily: {
|
|
"display": ["Inter", "sans-serif"]
|
|
},
|
|
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
|
|
backgroundImage: {
|
|
'grid-pattern': "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.03)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e\")",
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.checkbox-custom:checked {
|
|
background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuDSksUUmfaRgCz4Hpv8QOgSJuURlYyWJdMxep5O2mOI1J8cFghoERv2sqEtPQM4HgA3bChqOyi8Uyb_B2BHlSFCqg0-9GKppQ1jlR8pPtI9b6bWJQNGyDlTnJILk4BHUhDYbvs1AbnxsD076ph3QnH9-2SwOqraayE8Qs6qZ8jZQByK36ZcvkN4qd92SfnYVXu_9iupdaINHfP4OYmq_p9qF6kqTGiT_whJaqlDcllYeU18nLOAQszGkMszrWzXH-UM5EXd7zg1i-vm)
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-display bg-background-light dark:bg-background-dark min-h-screen flex flex-col relative overflow-x-hidden antialiased">
|
|
<div class="absolute inset-0 z-0 bg-grid-pattern pointer-events-none"></div>
|
|
<div class="absolute inset-0 z-0 bg-gradient-to-br from-primary/10 via-transparent to-transparent pointer-events-none opacity-50"></div>
|
|
<main class="relative z-10 flex-grow flex items-center justify-center p-4 sm:p-6 lg:p-8">
|
|
<div class="w-full max-w-[480px] bg-white dark:bg-card-dark rounded-xl shadow-2xl border border-gray-200 dark:border-border-dark overflow-hidden">
|
|
<div class="px-8 pt-10 pb-6 text-center">
|
|
<div class="mx-auto h-12 w-12 bg-primary/20 rounded-lg flex items-center justify-center mb-6 text-primary">
|
|
<span class="material-symbols-outlined text-3xl">analytics</span>
|
|
</div>
|
|
<h1 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white mb-2">
|
|
랜딩-마스터
|
|
</h1>
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">
|
|
다시 오신 것을 환영합니다! 대시보드 접속을 위해 정보를 입력해주세요.
|
|
</p>
|
|
</div>
|
|
<form class="px-8 pb-10 flex flex-col gap-5">
|
|
<div class="space-y-2">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">
|
|
이메일 주소
|
|
</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
|
|
<span class="material-symbols-outlined text-[20px]">mail</span>
|
|
</div>
|
|
<input class="block w-full h-12 pl-10 pr-3 rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-[#111318] text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-shadow sm:text-sm" id="email" placeholder="name@company.com" type="email"/>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="password">
|
|
비밀번호
|
|
</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
|
|
<span class="material-symbols-outlined text-[20px]">lock</span>
|
|
</div>
|
|
<input class="block w-full h-12 pl-10 pr-10 rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-[#111318] text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-shadow sm:text-sm" id="password" placeholder="비밀번호를 입력하세요" type="password"/>
|
|
<button class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 cursor-pointer" type="button">
|
|
<span class="material-symbols-outlined text-[20px]">visibility</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input class="checkbox-custom h-4 w-4 rounded border-gray-300 dark:border-gray-600 bg-white dark:bg-[#111318] text-primary focus:ring-primary focus:ring-offset-0 focus:ring-2 dark:focus:ring-offset-card-dark" type="checkbox"/>
|
|
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">30일 동안 로그인 유지</span>
|
|
</label>
|
|
<a class="text-sm font-medium text-primary hover:text-blue-500 transition-colors" href="#">
|
|
비밀번호를 잊으셨나요?
|
|
</a>
|
|
</div>
|
|
<button class="w-full h-12 bg-primary hover:bg-blue-600 text-white font-semibold rounded-lg shadow-lg shadow-primary/30 transition-all duration-200 transform active:scale-[0.98] flex items-center justify-center gap-2" type="button">
|
|
<span>로그인</span>
|
|
<span class="material-symbols-outlined text-[20px]">arrow_forward</span>
|
|
</button>
|
|
<div class="relative py-2">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="w-full border-t border-gray-200 dark:border-gray-700"></div>
|
|
</div>
|
|
<div class="relative flex justify-center text-xs uppercase">
|
|
<span class="bg-white dark:bg-card-dark px-2 text-gray-400">또는 다음으로 계속하기</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<button class="flex items-center justify-center gap-2 h-10 border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-[#111318] hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" type="button">
|
|
<img alt="Google Logo" class="w-5 h-5" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA7LCYf6vbP__6MGSgOfuOyZ7dWFz2c_aF7KuMdAeKQqGvYiREHzQnXKUVuchWo-ALw6yx7UU8RZE-3-MS4-Jf2an2NCpTAslhS4BVbNzJuvmc59oXd1NBxw7h8erIi-nDXsP9fhD4SyAzedQ8I90JQDB9eRxWmtMKy9OerRqX-S4ZHDbaia714WoB0qPgkOpqs0yjJHWO7OeR9Z5NXrLEdyCA7aJZAD22kB29d4UhCgdgVVN0VCx8oPvlLZEg7vWQbYUvfcv-1edYa"/>
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">구글 로그인</span>
|
|
</button>
|
|
<button class="flex items-center justify-center gap-2 h-10 border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-[#111318] hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" type="button">
|
|
<span class="material-symbols-outlined text-gray-900 dark:text-white text-[22px]">hub</span>
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">SSO 로그인</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="absolute bottom-6 w-full text-center">
|
|
<p class="text-xs text-gray-500 dark:text-gray-500">
|
|
© 2024 LandingMaster Inc.
|
|
<a class="hover:text-gray-900 dark:hover:text-gray-300 ml-2 transition-colors" href="#">개인정보처리방침</a>
|
|
<span class="mx-1">·</span>
|
|
<a class="hover:text-gray-900 dark:hover:text-gray-300 transition-colors" href="#">이용약관</a>
|
|
</p>
|
|
</div>
|
|
</main>
|
|
|
|
</body></html> |