<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
	crossorigin="anonymous">
<title>사용자 인증</title>
<style type="text/css">
@font-face {
	font-family: NotoSansCJKkr-Medium;
	src: url('/resources/fonts/NotoSansCJKkr-Medium.otf');
}

@font-face {
	font-family: NotoSansCJKkr-Regular;
	src: url('/resources/fonts/NotoSansCJKkr-Regular.otf');
}

body {
	background-color: #e6e1da
}

@media screen and (min-width : 640px) { /* Styles */
	.head {
		width: 500px;
		margin: 0 auto;
	}
	.content {
		width: 500px;
		margin: 0 auto;
	}
}

.content_option {
	padding-left: 30px;
	padding-right: 30px;
}

.title_option {
	font-family: NotoSansCJKkr-Medium;
	color: #000000;
	font-size: 16px;
}

.input_option {
	font-family: NotoSansCJKkr-Regular;
	color: #9e8d76;
	font-size: 20px;
	display: block;
	width: 100%;
	height: calc(1.5em + .75rem + 2px);
	padding: .375rem .75rem;
	font-weight: 400;
	line-height: 1.5;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

input[type=text] {
	border-radius: 3rem;
	margin-bottom: 10px;
	height: 50px;
}

input::placeholder {
	color: #9e8d76;
	font-size: 20px;
	font-family: NotoSansCJKkr-Regular;
}

.button_option {
	height: 70px;
	border-radius: 3rem;
	margin-bottom: 10px;
	background-color: #9e8d76;
	color: #ffffff;
	font-size: 22px;
}

select {
	background: white;
}

.select_option {
	border-radius: 3rem;
	margin-bottom: 10px;
	height: 50px;
	background: white url('/resources/img/arrow.png') no-repeat 95% 50%;
	background-size: 10px;
	-webkit-appearance: none;
}

img {
	width: 100%;
}

.test {
	align: middle;
}

p {
	font-size: 12px;
	text-align: left;
	color: #705b3d;
}
</style>
</head>

<body>
	<div class="head">
		<img src="/resources/img/logo.png" />
	</div>
	<div class="content content_option">
		<form method="get" action="user/info/submit">

			<label for="complex" class="title_option">• 단지정보</label> <select
				class="select_option input_option" id="complex" name="complex"
				required>
				<option value=""> 단지명</option>
				<c:forEach items="${complexInfos}" var="row">
					<option value="${row.complexIp}" class="select_option input_option">${row.complexName}</option>
				</c:forEach>
			</select> <label for="dong" class="title_option">• 세대정보</label> <input
				type="text" class="input_option" id="dong" name="dong"
				placeholder=" 동" required> <input type="text"
				class="input_option" id="ho" name="ho" placeholder=" 호" required>
			<button type="submit" class="button_option btn btn-block">인증번호
				전송하기</button>
		</form>
		<br>
		<div align="center">
			<p>
				[인증방법] <br> 1. 월패드에서 "설정">"모바일기기등록" 화면에 진입한 후, 중앙하단에 "+등록" 버튼을
				누르면 팝업창이 뜹니다. <br> 2. 팝업창을 띄운 상태에서 세대정보를 입력하고 "인증번호 전송하기"를 누르면
				해당 세대 월패드에 인증번호가 전송됩니다. <br> 3. 월패드에 출력된 인증번호를 입력하고 "인증하기" 버튼을
				누르면 인증이 완료됩니다.
			</p>
		</div>
	</div>

</body>
</html>