login.html
3.16 KB
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/oneDoc_layout}">
<!-- index.html 고유 CSS 추가 -->
<th:block layout:fragment="css">
<style>
html {
height: 100%;
}
body {
width:100%;
height:100%;
margin: 0;
padding-top: 80px;
padding-bottom: 40px;
font-family: "Nanum Gothic", arial, helvetica, sans-serif;
background: -webkit-gradient(linear, left bottom, right top, from(#92b5db), to(#1d466c));
background: -webkit-linear-gradient(bottom left, #92b5db 0%, #1d466c 100%);
background: -moz-linear-gradient(bottom left, #92b5db 0%, #1d466c 100%);
background: -o-linear-gradient(bottom left, #92b5db 0%, #1d466c 100%);
background: linear-gradient(to top right, #92b5db 0%, #1d466c 100%);
}
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 10px; /* Added */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
</style>
</th:block>
<!-- index.html 고유 스크립트 추가 -->
<th:block layout:fragment="script">
<script type="text/javascript">
$(document).ready(function(){
$("#btn-join").click(function(e) {
location.href = "[[@{/}]]join";
});
});
</script>
</th:block>
<th:block layout:fragment="content">
<div class="card align-middle" style="width:20rem; border-radius:20px;">
<div class="card-title" style="margin-top:30px;">
<h2 class="card-title text-center" style="color:#113366;">LOGIN</h2>
</div>
<div class="card-body">
<form class="form-signin" method="POST" th:action="@{/login_proc}">
<div class="row">
<div class="col">
<label for="uid" class="sr-only">메일주소</label>
<input type="email" id="uid" name="loginId" class="form-control" placeholder="name@example.com" required autofocus><BR>
</div>
</div>
<div class="row">
<div class="col">
<label for="upw" class="sr-only">암호</label>
<input type="password" id="upw" name="password" class="form-control" placeholder="비밀번호" required><br>
</div>
</div>
<div class="row">
<div class="col">
<button id="btn-login" class="form-control btn btn-lg btn-primary btn-block" type="submit">로그인</button>
</div>
<div class="col">
<button id="btn-join" class="form-control btn btn-lg btn-primary btn-block">사용자등록</button>
</div>
</div>
</form>
</div>
</div>
</th:block>
</html>