-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathJOIN02.html
68 lines (63 loc) · 3.11 KB
/
JOIN02.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/Logo.png" type="image/png">
<link rel="stylesheet" href="main.css">
<title>비밀번호 입력</title>
</head>
<body>
<nav class="top-nav">
<div class="nav-container">
<div class="logo-area">
<img src="img/Logo.png" alt="Logo" class="logo">
<img src="img/letters.svg" alt="Letters" class="letters">
</div>
<div class="login-area">
<span class="login-text" id="loginText">로그인</span>
<div class="user-info" id="userInfo" style="display: none;">
<img src="img/profile.svg" alt="프로필" class="profile-icon">
<span class="user-name">사용자 이름</span>
</div> <!-- 로그인 후 사용자 이름 표시 --> <!-- 로그인 후 사용자 이름 표시 -->
</div>
</div>
</nav>
<main class="main-content">
<div class="box">
<h1 class="title">비밀번호 입력</h1>
<input type="password" id="passwordInput" placeholder="비밀번호를 입력해주요" class="email-input">
<input type="password" id="confirmPasswordInput" placeholder="비밀번호를 다시 입력해주세요" class="email-input">
<div class="button-container">
<button class="previous-button" onclick="goToPrevious()">이전</button>
<button class="next-button" id="nextButton" onclick="goToNext()" disabled>다음</button>
</div>
</div>
</main>
</div>
<script>
function goToPrevious() {
window.location.href = 'JOIN01.html'; // 이전 페이지로 이동
}
function goToNext() {
// 다음 페이지로 이동하는 로직 추가
alert('다음 페이지로 이동합니다.'); // 예시로 알림창 표시
}
// 비밀번호 입력란의 유효성을 검사하여 다음 버튼 활성화
const passwordInput = document.getElementById('passwordInput');
const confirmPasswordInput = document.getElementById('confirmPasswordInput');
const nextButton = document.getElementById('nextButton');
function validatePasswords() {
if (passwordInput.value && confirmPasswordInput.value && passwordInput.value === confirmPasswordInput.value) {
nextButton.disabled = false; // 비밀번호가 일치하면 다음 버튼 활성화
nextButton.classList.remove('disabled'); // 비활성화 클래스 제거
} else {
nextButton.disabled = true; // 비밀번호가 일치하지 않으면 다음 버튼 비활성화
nextButton.classList.add('disabled'); // 비활성화 클래스 추가
}
}
passwordInput.addEventListener('input', validatePasswords);
confirmPasswordInput.addEventListener('input', validatePasswords);
</script>
</body>
</html>