-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathJOIN03.html
98 lines (90 loc) · 4.28 KB
/
JOIN03.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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!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="box3">
<h1 class="title" style="margin-bottom: 32px;">이용약관 동의</h1>
<label class="checkbox-label">
<input type="checkbox" id="agreeAll" onchange="toggleAllCheckboxes(this)">
서비스 이용 약관에 모두 동의합니다.
</label>
<hr class="divider">
<label class="checkbox-label">
<input type="checkbox" id="ageCheck" class="custom-checkbox">
<span class="custom-checkbox-indicator"></span>
(필수)
<a href="#" style="color: #444CE7;"> 만 14세 이상 확인</a>
</label>
<label class="checkbox-label">
<input type="checkbox" id="termsOfService">(필수)
<a href="#" style="color: #444CE7;"> 서비스 이용 약관 동의</a>
</label>
<label class="checkbox-label">
<input type="checkbox" id="privacyPolicy">(필수)
<a href="#" style="color: #444CE7;"> 개인정보 수집 이용 동의</a>
</label>
<label class="checkbox-label">
<input type="checkbox" id="thirdParty">(필수)
<a href="#" style="color: #444CE7;"> 개인정보 제3자 제공 및 위탁 동의</a>
</label>
<label class="checkbox-label" style="margin-bottom: 32px;">
<input type="checkbox" id="marketing">(선택)
<a href="#" style="color: #444CE7;"> 마케팅 목적 개인정보 수집 및 이용 동의</a>
</label>
<div class="button-container" style="margin-top: 32px;">
<button class="previous-button" onclick="goToPrevious()">이전</button>
<button class="agree-button" id="agreeButton" onclick="goToNext()" disabled>동의</button>
</div>
</div>
</main>
</div>
<script>
function goToPrevious() {
window.location.href = 'JOIN02.html'; // 이전 페이지로 이동
}
function goToNext() {
// 다음 페이지로 이동하는 로직 추가
alert('다음 페이지로 이동합니다.'); // 예시로 알림창 표시
}
function toggleAllCheckboxes(checkbox) {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const agreeButton = document.getElementById('agreeButton');
checkboxes.forEach((cb) => {
cb.checked = checkbox.checked;
});
// 모든 체크박스가 체크되었는지 확인
const allChecked = Array.from(checkboxes).every(cb => cb.checked);
// 동의 버튼 활성화/비활성화
if (allChecked) {
agreeButton.classList.add('active');
agreeButton.removeAttribute('disabled');
} else {
agreeButton.classList.remove('active');
agreeButton.setAttribute('disabled', true);
}
}
</script>
</body>
</html>