로그인페이지 수정
parent
a9a891cae6
commit
bdbab38d03
|
|
@ -33,3 +33,50 @@ body::-webkit-scrollbar {
|
|||
footer{
|
||||
z-index:200;
|
||||
}
|
||||
|
||||
html,body {height: 100%;font-family: 'Noto Sans KR';font-weight:400;font-size:14px;color:#333;}
|
||||
body {display: flex;flex-direction: column;text-align: center;margin: 0;}
|
||||
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0px;padding:0px;border:0px}
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
|
||||
legend {position:absolute;font-size:0px;line-height:0px;text-indent:-9999em;overflow:hidden}
|
||||
input, button {margin:0px;padding:0px;border-radius:0; /*-webkit-appearance:none;*/background:none;}
|
||||
button, input[type=submit] {cursor:pointer}
|
||||
input[type=text], input[type=password], input[type=image], button {-webkit-appearance:none}
|
||||
textarea, select,button {font-style: normal; -webkit-appearance:none;}
|
||||
a {color:inherit;text-decoration:none}
|
||||
a:visited {color:inherit;text-decoration:none}
|
||||
a,img,input, a:active, a:focus {outline:none;}
|
||||
ul,li,dl,dt,dd {padding:0px;margin:0px;list-style:none;box-sizing:border-box;}
|
||||
img {margin:0px;padding:0px;}
|
||||
div {margin:0px;padding:0px;box-sizing:border-box;}
|
||||
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');
|
||||
/*font-family: 'Noto Sans KR' font-family: 'Nanum Gothic' font-family: 'Noto Serif KR',*/
|
||||
@font-face {font-family: 'GmarketSansBold';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');font-weight: normal;font-style: normal;}
|
||||
@font-face {font-family: 'GmarketSansMedium';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');font-weight: normal;font-style: normal;}
|
||||
@font-face {font-family: 'GmarketSansLight';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');font-weight: normal;font-style: normal;}
|
||||
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css'); /*font-family: 'NanumSquare';300,400,700,800*/
|
||||
|
||||
.index_warp {width:100%;height:100%;clear:both;display:block;background:#031134 url('/img/main_bg.png') center no-repeat;background-size:cover;}
|
||||
.login_warp {width:1100px;margin:12% auto 0px;display:inline-block;}
|
||||
.login_warp li {float:left;text-align:left;}
|
||||
.login_warp li:nth-child(1) {width:65%;}
|
||||
.login_warp li:nth-child(1) img {display:block;}
|
||||
.login_warp li:nth-child(1) h1 {clear:both;width:100%;display:block;color:#fff;font-family: 'GmarketSansBold';font-size:64px;margin:70px 0px 0px 0px;}
|
||||
.login_warp li:nth-child(1) h2 {clear:both;width:100%;display:block;color:#fff;font-family: 'GmarketSansLight';font-size:18px;margin:0px 0px 0px 0px;}
|
||||
.login_warp li:nth-child(2) {width:35%;}
|
||||
.login_warp li:nth-child(2) div {background-color:rgba(255,255,255,0.1);border-radius:3px;width:380px;height:500px;padding:40px 40px 0px;box-sizing:border-box;color:#fff;}
|
||||
.login_warp li:nth-child(2) div h1 {clear:both;width:100%;display:block;padding:0px 0px 10px 0px;margin:0px 0px 80px 0px;border-bottom:1px solid rgba(255,255,255,0.5);font-family: 'Nanum Gothic';font-weight:lighter;font-size:34px;}
|
||||
.login_warp li:nth-child(2) dl {width:100%;display:flex;}
|
||||
.login_warp li:nth-child(2) dd {float:left;font-size:13px;flex:auto}
|
||||
.login_warp li:nth-child(2) dd:hover {color:#fee494;}
|
||||
.login_warp li:nth-child(2) dd span {font-size:0px;display:inline-block;width:4px;height:4px;border-radius:50%;background-color:#fff;margin:0px 7px 0px 0px;position:relative;top:-7px;}
|
||||
|
||||
.form_01 {width:100%;height:35px;padding-left:55px;font-size:14px;margin:0px auto 10px;border:0px;background:#fff;display:inline-block;border-radius:2px;color:#333;box-sizing:border-box;}
|
||||
.form_log {background:#fff url('/img/login_icon01.png') 20px 4px no-repeat;}
|
||||
.form_pw {background:#fff url('/img/login_icon02.png') 20px 4px no-repeat;}
|
||||
.form_02 {width:15px;height:15px;margin:0px 5px 0px 0px;border:0px;background-color:#fff;display:inline-block;position:relative;top:2px;}
|
||||
|
||||
.btn_login {width:100%;height:40px;line-height:38px;text-align:center;background-color:#3356a4;color:#fff;font-size:16px;display:inline-block;border-radius:5px;border:0px;margin:100px 0px 10px;transition: background 0.5s ease-in-out;}
|
||||
.btn_login:hover {cursor: pointer;background-color:#b72525;font-weight:bold;}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
|
|
@ -1,11 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ko" class="h-100"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>해양경찰청 보안종합포털</title>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>해양경찰청 보안정보시스템</title>
|
||||
|
||||
<!--bootstrap-->
|
||||
<link rel="stylesheet" th:href="@{/vendor/bootstrap-5.2.0-dist/css/bootstrap.min.css}">
|
||||
|
|
@ -24,8 +24,10 @@
|
|||
<!--bootstrap-->
|
||||
<script type="text/javascript" th:src="@{/vendor/bootstrap-5.2.0-dist/js/bootstrap.bundle.min.js}"></script>
|
||||
<!--bootstrap-datepicker-->
|
||||
<script type="text/javascript" th:src="@{/vendor/bootstrap-datepicker-1.9.0-dist/js/bootstrap-datepicker.min.js}"></script>
|
||||
<script type="text/javascript" th:src="@{/vendor/bootstrap-datepicker-1.9.0-dist/locales/bootstrap-datepicker.ko.min.js}"></script>
|
||||
<script type="text/javascript"
|
||||
th:src="@{/vendor/bootstrap-datepicker-1.9.0-dist/js/bootstrap-datepicker.min.js}"></script>
|
||||
<script type="text/javascript"
|
||||
th:src="@{/vendor/bootstrap-datepicker-1.9.0-dist/locales/bootstrap-datepicker.ko.min.js}"></script>
|
||||
<!--summernote-->
|
||||
<script type="text/javascript" th:src="@{/vendor/summernote-0.8.18-dist/summernote-lite.min.js}"></script>
|
||||
<script type="text/javascript" th:src="@{/vendor/summernote-0.8.18-dist/lang/summernote-ko-KR.min.js}"></script>
|
||||
|
|
@ -46,20 +48,20 @@
|
|||
</th:block>-->
|
||||
</head>
|
||||
<body class="d-flex flex-column h-100">
|
||||
<header th:replace="fragments/header :: headerFragment"></header>
|
||||
<div sec:authorize="isAnonymous()" layout:fragment="content"></div>
|
||||
<div sec:authorize="isAuthenticated()" class="row h-100 mx-0">
|
||||
<div class="col-2 border-end">
|
||||
<div th:replace="fragments/leftMenu :: leftMenuFragment"></div>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<div layout:fragment="content"></div>
|
||||
</div>
|
||||
<header th:replace="fragments/header :: headerFragment"></header>
|
||||
<div sec:authorize="isAnonymous()" layout:fragment="content"></div>
|
||||
<div sec:authorize="isAuthenticated()" class="row h-100 mx-0">
|
||||
<div class="col-2 border-end">
|
||||
<div th:replace="fragments/leftMenu :: leftMenuFragment"></div>
|
||||
</div>
|
||||
<footer th:replace="fragments/footer :: footerFragment"></footer>
|
||||
<div id="fadeDiv" style="display: none;">
|
||||
<div class="p-5 rounded"><h1>저장중입니다.</h1></div>
|
||||
<div class="col-10">
|
||||
<div layout:fragment="content"></div>
|
||||
</div>
|
||||
<th:block layout:fragment="modal"></th:block>
|
||||
</div>
|
||||
<footer th:replace="fragments/footer :: footerFragment"></footer>
|
||||
<div id="fadeDiv" style="display: none;">
|
||||
<div class="p-5 rounded"><h1>저장중입니다.</h1></div>
|
||||
</div>
|
||||
<th:block layout:fragment="modal"></th:block>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,21 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout/layout}">
|
||||
layout:decorate="~{layout/layout}"
|
||||
>
|
||||
|
||||
<th:block layout:fragment="css">
|
||||
<link rel="stylesheet" th:href="@{/css/login/login.css}">
|
||||
</th:block>
|
||||
<th:block layout:fragment="script">
|
||||
<script type="text/javascript" th:src="@{/js/login/login.js}"></script>
|
||||
</th:block>
|
||||
|
||||
<div layout:fragment="content">
|
||||
<img id="img02" th:src="@{/img/img02.jpg}" class="w-100 h-100" alt="배경2">
|
||||
<div id="form-signin" class="form-signin text-center bg-white">
|
||||
<!-- <img id="img02" th:src="@{/img/main_bg.png}" class="w-100 h-100" alt="배경2">-->
|
||||
<!-- <div id="form-signin" class="form-signin text-center bg-white">-->
|
||||
<!-- Security config의 loginPage("url")와 action url과 동일하게 작성-->
|
||||
<div class="row">
|
||||
<h2>반갑습니다</h2>
|
||||
<p>이곳은 보안정보시스템입니다</p>
|
||||
</div>
|
||||
|
||||
<!-- <div class="row">-->
|
||||
<!-- <h2>반갑습니다</h2>-->
|
||||
<!-- <p>이곳은 보안정보관리시스템입니다</p>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<form action="/login" method="post">
|
||||
<!-- Spring Security가 적용되면 POST 방식으로 보내는 모든 데이터는 csrf 토큰 값이 필요 -->
|
||||
<input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
|
||||
|
|
@ -23,32 +28,63 @@
|
|||
<p th:if="${loginError}" class="error text-danger">로그인에 실패하였습니다.</p>
|
||||
<!-- 로그인 시 아이디의 name 애트리뷰트 값은 username -->
|
||||
<!-- 파라미터명을 변경하고 싶을 경우 config class formlogin()에서 .usernameParameter("") 명시 -->
|
||||
<div class="row">
|
||||
<label for="username" class="col-sm-4 col-form-label mb-2">아이디</label>
|
||||
<div class="col-sm-8 mb-2">
|
||||
<input type="text" class="form-control" id="username" name="username">
|
||||
</div>
|
||||
<label for="password" class="col-sm-4 col-form-label mb-2">비밀번호</label>
|
||||
<div class="col-sm-8 mb-2">
|
||||
<input type="password" class="form-control" id="password" name="password">
|
||||
</div>
|
||||
|
||||
<div class="index_warp ">
|
||||
<ul class="login_warp">
|
||||
<li>
|
||||
<img src="img/logo_white.png" alt=""/>
|
||||
<h1>보안정보관리시스템</h1>
|
||||
<h2>NATIONAL SECRET INTELLIGENCE MANAGEMENT SYSTEM</h2>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<h1>Login</h1>
|
||||
<input th:src="@{/img/login_icon02.png}" type="text" name="username" id="username" placeholder="아이디" onfocus="this.placeholder=''" onblur="this.placeholder='아이디'" class="form_01 form_log">
|
||||
<input th:src="@{/img/login_icon02.png}" type="password" name="password" id="password" placeholder="비밀번호" onfocus="this.placeholder=''" onblur="this.placeholder='비밀번호'" class="form_01 form_pw">
|
||||
<input name="idchk" type="checkbox" id="idchk" class="form_02"> 아이디저장
|
||||
|
||||
<input type="submit" name="login" id="login" value="로그인" class="btn_login">
|
||||
|
||||
<dl>
|
||||
<dd><a href="#" data-bs-toggle="modal" data-bs-target="#userInsertModal"><span>dot</span>회원가입</a></dd>
|
||||
<dd><a href="#"><span>dot</span>아이디/비밀번호찾기</a></dd>
|
||||
</dl>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" class="disabled" value="remember-me"> 계정저장(비활성화)
|
||||
</label>
|
||||
</div>-->
|
||||
<button class="w-100 my-2 btn btn-lg btn-primary" type="submit">로그인</button>
|
||||
<div class="row my-2 justify-content-between">
|
||||
<div class="col-auto">
|
||||
<a href="#" data-bs-toggle="modal" data-bs-target="#userInsertModal">회원가입</a>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="#">아이디/비밀번호 찾기</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <div class="row">-->
|
||||
<!-- <label for="username" class="col-sm-4 col-form-label mb-2">아이디</label>-->
|
||||
<!-- <div class="col-sm-8 mb-2">-->
|
||||
<!-- <input type="text" class="form-control" id="username" name="username">-->
|
||||
<!-- </div>-->
|
||||
<!-- <label for="password" class="col-sm-4 col-form-label mb-2">비밀번호</label>-->
|
||||
<!-- <div class="col-sm-8 mb-2">-->
|
||||
<!-- <input type="password" class="form-control" id="password" name="password">-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <!–<div class="checkbox mb-3">-->
|
||||
<!-- <label>-->
|
||||
<!-- <input type="checkbox" class="disabled" value="remember-me"> 계정저장(비활성화)-->
|
||||
<!-- </label>-->
|
||||
<!-- </div>–>-->
|
||||
<!-- <button class="w-100 my-2 btn btn-lg btn-primary" type="submit">로그인</button>-->
|
||||
<!-- <div class="row my-2 justify-content-between">-->
|
||||
<!-- <div class="col-auto">-->
|
||||
<!-- <a href="#" data-bs-toggle="modal" data-bs-target="#userInsertModal">회원가입</a>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="col-auto">-->
|
||||
<!-- <a href="#">아이디/비밀번호 찾기</a>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </form>-->
|
||||
<!-- </div>-->
|
||||
|
||||
|
||||
|
||||
<div class="modal fade" id="userInsertModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="userInsertModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
|
|
|
|||
Loading…
Reference in New Issue