<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TreeNut 로그인</title>
<style>
body {
margin: 0;
font-family: 'Roboto', Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.logo {
font-size: 55px;
font-weight: bold;
color: #4CAF50;
margin-bottom: 20px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.container {
text-align: center;
width: 100%;
max-width: 400px;
background-color: #f4f4f9; /* body 배경색과 동일하게 설정 */
padding: 30px 20px;
border-radius: 12px;
/* box-shadow 제거 */
}
.title {
font-size: 35px;
font-weight: bold;
margin-bottom: 15px;
color: #333;
}
.subtitle {
font-size: 14px;
color: #666;
margin-bottom: 35px; /* 추가된 마진 */
}
.login-buttons button {
width: 100%;
padding: 14px;
margin: 10px 0;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.login-buttons button:hover {
transform: translateY(-3px);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}
.btn-kakao {
background-color: #fee500;
color: #3c1e1e;
}
.btn-google {
background-color: white;
color: #555;
border: 1px solid #ddd;
}
.btn-naver {
background-color: #03c75a;
color: white;
}
.btn-apple {
background-color: black;
color: white;
}
.divider {
margin: 20px 0;
font-size: 14px;
color: #999;
position: relative;
}
.divider::before, .divider::after {
content: "";
position: absolute;
top: 50%;
width: 40%;
height: 1px;
background: #ddd;
}
.divider::before {
left: 0;
}
.divider::after {
right: 0;
}
.manual-login input {
width: 100%;
padding: 14px;
margin: 8px 0;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 8px;
box-sizing: border-box;
transition: border 0.2s, box-shadow 0.2s;
}
.manual-login input:focus {
border-color: #4CAF50;
box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
}
.manual-login button {
width: 100%;
padding: 14px;
background-color: #4CAF50;
color: white;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
}
.manual-login button:hover {
background-color: #2E7D32;
transform: translateY(-3px);
}
.footer {
margin-top: 20px;
font-size: 12px;
color: #666;
}
.footer a {
color: #4CAF50;
text-decoration: none;
margin: 0 5px;
font-weight: bold;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">TreeNut</div>
<div class="title">AI 어시스턴트한테</div>
<div class="title">도움을 받아보세요!</div>
<div class="subtitle">TreeNut와 함께 편리한 AI 서비스를 이용해보세요</div>
<div class="login-buttons">
<button class="btn-kakao">카카오 계정으로 시작하기</button>
<button class="btn-google">구글 계정으로 시작하기</button>
<button class="btn-naver">네이버 계정으로 시작하기</button>
<button class="btn-apple">Apple로 로그인</button>
</div>
<div class="divider">또는</div>
<div class="manual-login">
<input type="text" placeholder="아이디" />
<input type="password" placeholder="비밀번호" />
<button>로그인</button>
</div>
<div class="footer">
<a href="#">회원가입</a> |
<a href="#">아이디 찾기</a> |
<a href="#">비밀번호 찾기</a>
</div>
</div>
</body>
</html>
