-
Notifications
You must be signed in to change notification settings - Fork 0
/
payTermsAgree.html
163 lines (151 loc) · 5.32 KB
/
payTermsAgree.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>
<title>이용약관</title>
<style>
:root{
--mainColor: #494949;
--pointColor: #ff3e3e;
}
*{
box-sizing: border-box;
font-family: 'Spoqa Han Sans Neo', 'sans-serif';
}
ul>li{list-style: none}
a{text-decoration: none;}
#wrap-container{
border: solid 1px #212121;
width: 500px;
padding: 35px;
margin: 0 auto;
}
#title{
/* background-color: GhostWhite; */
border-bottom: solid 2px #d1d1d1;
margin-top: 15px;
padding-bottom: 10px;
font-weight: bold;
font-size: 14px;
color: #212121;
}
#agreeForm p{
color: var(--mainColor);
font-size: 12px;
}
#agreeAll{
border-bottom: solid 1px #d1d1d1;
margin-top: 15px;
margin-bottom: 15px;
}
.checkRow{
display: flex;
justify-content: space-between;
}
.checkRow input{margin-top: auto; margin-bottom: auto;}
.termTitle{
color: var(--mainColor);
height: 50px;
width: 100%;
}
.termTitle span{color: var(--pointColor);}
.termText{
width: 100%;
height: 124px;
padding: 15px 19px 17px 14px;
color: var(--mainColor);
font-size: 11px;
border: solid 1px #d1d1d1;
}
#agreeBtnBox{display: flex; justify-content: center;}
#chkBtn{
background-color: #ffffff;
width: 200px;
height: 45px;
margin-top: 30px;
border-radius: 23px;
border: solid 1px #d1d1d1;
font-size: 15px;
color: #666666;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap-container">
<div id="title">결제 약관 동의</div>
<div id="agreeFormBox">
<form id="agreeForm" action="" method="post">
<div id="termsContents">
<div id="agreeAll" class="checkRow">
<p>결제 약관에 모두 동의합니다.</p>
<input type="checkbox" name="selectall" value="selectall" onclick="selectAll(this)"/>
</div>
<div id="terms1">
<div class="termTitle checkRow">
<p>제 3자에 대한 개인정보 제공 동의 <span>(필수)</span></p>
<input type="checkbox" name="agree" value="selectFirst" onclick="checkSelectAll()">
</div>
<div class="term">
<textarea class="termText" name="">
'펀딩하기'를 통한 결제 및 리워드 전달 서비스를 제공하기 위해, 이용자의 사전 동의 아래 제3자(프로젝트 메이커)에게 제공합니다.
메이커에게 전달되는 개인 정보는 기재된 목적 달성 후 파기에 대한 책임이메이커에게 있으며,
파기하지 않아 생기는 문제에 대한 법적 책임은 메이커에게 있습니다.
아래 내용에 대하여 동의를 거부하실 수 있으며, 거부 시 서비스 이용이 제한됩니다.
</textarea>
</div>
</div>
<div id="terms2">
<div class="termTitle checkRow">
<p>책임 규정에 대한 동의 <span>(필수)</span></p>
<input type="checkbox" name="agree" value="checkSecond" onclick="checkSelectAll()"/>
</div>
<div class="term">
<textarea class="termText" name="">
FunWare는 플랫폼을 제공하는 중개자로 크라우드펀딩을 받는 당사자가 아닙니다.
보상품 제공 등에 관한 지연, 제품의 하자 등으로 인한 일체의 법적책임은
펀딩을 받는 프로젝트 개설자가 부담합니다.
하지만, FunWare는 프로젝트 진행자와 후원자간의
원활한 의사소통을 위해 최선의 노력을 다하고 있습니다.
</textarea>
</div>
</div>
</div>
<div id="agreeBtnBox">
<button type="submit" id="chkBtn" name="chkBtn" onclick="btn()">동의합니다.</button>
</div>
</form>
</div>
</div>
<script>
// checkbox
function checkSelectAll(){
const checkBoxes = document.querySelectorAll('input[name="agree"]');
const checked = document.querySelectorAll('input[name="agree"]:checked');
const selectAll = document.querySelector('input[name="selectall"]');
if(checkBoxes.length === checked.length){
selectAll.checked = true;
}else{
selectAll.checked = false;
}
}
function selectAll(selectAll){
const checkBoxes = document.getElementsByName('agree');
checkBoxes.forEach((checkbox) => {
checkbox.checked = selectAll.checked;
});
}
// button
function btn(){
const selectAll = document.querySelector('input[name="selectall"]');
if(selectAll.checked == true){
window.opener.document.getElementById("chkTerm").checked = true;
self.close();
}else{
alert('약관에 모두 동의하셔야 서비스 이용이 가능합니다.');
}
}
</script>
</body>
</html>