웹 디자인 수정중

src/main/webapp/app/oper/OPER01010.html

@@ -2,7 +2,7 @@
 	<div class="itp_cont">
 		<article class="itp_detail">
 			<div class="itp_det_head fix">
-				<h2 class="pull-left itp_det_tit"><i class="glyphicon glyphicon-chevron-right"></i> <strong>사용자관리</strong></h2>
+				<h2 class="pull-left itp_det_tit"><i class="glyphicon glyphicon-chevron-right"></i><i class="glyphicon glyphicon-chevron-right"></i> <strong>사용자관리</strong></h2>
 				<div class="pull-right itp_cicon">
 					<button type="button" id="ITP_BTN_OPER01010_SRH" class="btn btn-success btn-sm SEB" style="display: inline-block;"><i class="glyphicon "></i>&nbsp;&nbsp;조회&nbsp;&nbsp;</button>
 					<button type="button" id="ITP_BTN_OPER01010_MODIFY" class="btn btn-success btn-sm UPB" style="display: inline-block;"><i class="glyphicon "></i>&nbsp;&nbsp;수정&nbsp;&nbsp;</button>

src/main/webapp/css/style.css

@@ -2,7 +2,12 @@
 @media print {
 	*{visibility: hidden; margin:0; paddig:0;}
 }
-
+@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;
+}
 
 /* COMMON */
 html, body {width:100%; height:100%; background:#eee; overflow-y:hidden;}
@@ -89,18 +94,19 @@ a, button {outline:none !important; text-decoration:none !important;}
 #ITP_OVERLAY {position:fixed; display:none; width:100%; height:100%; top:0; left:0; right:0; bottom:0; background:rgba(250,250,250,.8); z-index:1060;}
 
 /* ITP_LOGIN */
-#ITP_LOGIN {width:100%; height:100%;}
-#ITP_LOGIN .itp_head {margin-bottom:8px; letter-spacing:-1px;}
-#ITP_LOGIN .itp_bar {margin:0; padding:0; float:left; margin:0 15px 0 15px; font-size:22px;}
-#ITP_LOGIN .itp_logo {margin:0; padding:0; color:#337ab7; float:left;}
-#ITP_LOGIN .itp_tit {margin:0; padding:7px 0 0 0; float:left; font-size:22px;}
+#ITP_LOGIN {width:100%; height:100%; font-family: 'GmarketSansMedium'}
+#ITP_LOGIN .itp_head {margin:0 5%; letter-spacing:-1px; width:90%; height:40px; margin-bottom:50px;}
+#ITP_LOGIN .itp_bar {width:4px; height:26px; padding:0; float:left; margin:8px 7px 0 7px; font-size:27px; font-weight:100; background:#ccc;}
+#ITP_LOGIN .itp_logo {margin:0; padding:0; color:#000; font-size:39px; float:left; font-weight:700;}
+#ITP_LOGIN .itp_tit {margin:0; padding:7px 0 0 0; float:left; font-size:27px;}
 #ITP_LOGIN .itp_cont {width:100%; min-height:calc(100vh - 115px); padding:170px 20px 150px 20px; position:relative;}
-#ITP_LOGIN .itp_box_wrap {width:600px; height:365px; position:absolute; top:50%; left:50%; margin:-182px 0 0 -300px;}
-#ITP_LOGIN .itp_box {padding:20px 20px 0 20px; margin-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:0;}
+#ITP_LOGIN .itp_box_wrap {width:450px; height:600px; position:absolute; top:55%; left:50%; transform: translate(-50%, -50%);}
+#ITP_LOGIN .itp_bottom_gray {background:#eee; width:100%; height:65px; top:-65px; border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;}
+#ITP_LOGIN .itp_box {padding:20px 20px 0 20px; height:580px; margin-bottom:0; border-radius:30px; box-shadow: 0px 0px 10px #666;}
 #ITP_LOGIN .itp_body {padding-bottom:0;}
 #ITP_LOGIN .itp_box .control-label {text-align:left;}
 #ITP_LOGIN .itp_box .itp_lb {padding-top:7px;}
-#ITP_LOGIN .itp_box .itp_btn {line-height:6.15; width:100%;}
+#ITP_LOGIN .itp_box .itp_btn {line-height:1.8; margin:0 5%; width:90%;}
 #ITP_LOGIN .itp_box .form-group .checkbox input[type=checkbox] {margin-top:3px;}
 #ITP_LOGIN .itp_error {padding-top:15px; color:#a94442;}
 #ITP_LOGIN .itp_no_mar {margin-bottom:0 !important;}
@@ -109,16 +115,27 @@ a, button {outline:none !important; text-decoration:none !important;}
 #ITP_LOGIN .itp_copyright {font-size:12px;}
 #ITP_LOGIN .itp_forgotId {width:82%;}
 #ITP_LOGIN .itp_forgotBtn {border-top-right-radius:4px; border-bottom-right-radius:4px;}
+#ITP_LOGIN .itp_login {height:50px;}
+#ITP_LOGIN .itp_find {margin-top:34px; font-weight:100; cursor:pointer;}
+#ITP_LOGIN .itp_btn_bar {margin-top:10px;}
+#ITP_LOGIN .itp_login_img {width:100%; padding:0 auto;}
+#ITP_LOGIN .itp_img{width:150px; height:150px; top:-60px; position: absolute; margin:0 33.3%;}
+#ITP_LOGIN .itp_login_input label {position:absolute; top:50%; left:27px; color:#adadad; transform:translateY(-50%); font-size: 12px; border: none; outline:none; transition: top .5s ease;}
+#ITP_LOGIN .itp_login_input {width:90%; margin:0 5%; position:relative;}
+#ITP_LOGIN .itp_login_input input {width:100%; padding:20px 10px 10px; outline:none; border-radius:7px; background:#eee;}
+#ITP_LOGIN .itp_login_input input:focus + label {top:15px; font-size:8px; color: #2691d9;}
+#ITP_LOGIN .itp_login_input input:valid + label {top:15px; font-size:8px; color: #2691d9;}
+#ITP_LOGIN .itp_login_input:not(:placeholder-shown) ~ label{top:0px; font-size:12px;}
 
 /* ITP_HEADER */
-#ITP_HEADER .itp_head {width:100%; height:36px; position:relative; line-height:36px; z-index:100;}
-#ITP_HEADER .itp_tit {margin:0; padding:0; line-height:36px; font-size:20px;}
+#ITP_HEADER .itp_head {font-family: 'GmarketSansMedium';width:100%; height:40px; position:relative; line-height:40px; z-index:100;}
+#ITP_HEADER .itp_tit {margin:0; padding:0; line-height:40px; font-size:20px;}
 #ITP_HEADER .itp_tit span {display: inline-block; vertical-align: middle}
 #ITP_HEADER .itp_lt {position:absolute; top:0px; left:10px;}
 #ITP_HEADER .itp_rt {position:absolute; top:0px; right:20px;}
 #ITP_HEADER .itp_icon {float:left; padding-top:3px; margin-right:10px;}
 #ITP_HEADER .itp_icon i {color:#fff; font-size:20px;}
-#ITP_HEADER .itp_icon i.glyphicon-home {font-size:18px;}
+#ITP_HEADER .itp_icon img.glyphicon-logo {width:30px; margin-top:-7px;}
 #ITP_HEADER .itp_icon i.glyphicon-user {font-size:18px;}
 #ITP_HEADER .itp_icon i.glyphicon-off {font-size:18px;}
 #ITP_HEADER .itp_user {float:left; font-size:16px; margin-left:15px;}
@@ -130,13 +147,13 @@ a, button {outline:none !important; text-decoration:none !important;}
 #ITP_HEADER .itp_sch_brand button{width:90px; border:1px solid #000;}
 #ITP_HEADER .itp_menu {float:left; border:1px solid #ddd; line-height: 26px; background:#eee;margin:4px; border-radius: 2px; padding:0 4px;}
 #ITP_HEADER .itp_menu a {color:#000; font-size:13px; text-decoration:none;}
-#ITP_HEADER .itp_out {float:left; border:1px solid #000; line-height: 27px; background:#666; margin:4px; border-radius: 2px; padding:0 4px;}
-#ITP_HEADER .itp_out a {color:#fff; font-size:13px; text-decoration:none;}
-#ITP_HEADER .itp_tabs {position:relative; z-index:100;}
+#ITP_HEADER .itp_out {width:70px; height:30px;  float:left; border:1px solid #333; line-height: 28px; background:#fff; margin:6px; border-radius: 10px; padding:0 4px;}
+#ITP_HEADER .itp_out a {padding:4px; color:#000; font-size:13px; text-decoration:none;}
+#ITP_HEADER .itp_tabs {position:relative; z-index:100; transition:all .25s ease; float:right; width:calc(100% - 240px);}
 #ITP_HEADER .itp_tabs .nav-tabs {padding:4px 4px 0 4px; background:#fff;}
-#ITP_HEADER .itp_tabs .nav-tabs > li a {border:1px solid #ddd; background:#f5f5f5; font-size:12px; color:#333; padding:5px 13px 5px 15px; margin-right:4px; outline:none;}
+#ITP_HEADER .itp_tabs .nav-tabs > li a {border:1px solid #ddd; background:#f5f5f5; font-size:12px; color:#666; padding:5px 13px 5px 15px; margin-right:4px; outline:none;}
 #ITP_HEADER .itp_tabs .nav-tabs > li a i.glyphicon-remove {font-size:10px; margin-left:4px; cursor:pointer;}
-#ITP_HEADER .itp_tabs .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {background:#D6E6F3; color:#000; border:1px solid #1A3E5E; border-bottom-color:transparent;}
+#ITP_HEADER .itp_tabs .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {background:#fff; color:#666; border:1px solid #ccc; border-bottom-color:transparent; font-weight:700;}
 #ITP_HEADER .itp_tabs .nav-tabs > li > a:hover {background:#D6E6F3 !important; border:1px solid #1A3E5E; border-bottom-color:transparent; color:#000;}
 
 /* ITP_SIDEBAR */
@@ -164,7 +181,7 @@ a, button {outline:none !important; text-decoration:none !important;}
 #ITP_SIDEBAR .itp_nav .itp_svgs li a .itp_tt {float:left;}
 
 /* ITP_CONTAINER */
-#ITP_CONTAINER {height:calc(100vh - 69px); padding:8px; transition:all .25s ease; float:left; width:calc(100% - 240px);}
+#ITP_CONTAINER {height:calc(100vh - 69px); padding:8px; transition:all .25s ease; float:left; width:calc(100% - 240px);background:#fff;}
 #ITP_CONTAINER.itp_open_conts {padding-left:8px; width:100%;}
 #ITP_CONTAINER .itp_contents {background:#fff; height:100%;}
 #ITP_CONTAINER .itp_contents .itp_sec {height:100%;}
@@ -221,7 +238,7 @@ a, button {outline:none !important; text-decoration:none !important;}
 #ITP_CONTAINER .itp_adv_srh .form-group .itp_adv_chk .itp_check {float:right; margin-left:10px;}
 #ITP_CONTAINER .itp_detail {display:table-cell; vertical-align:top; height:100%;}
 
-#ITP_CONTAINER .itp_detail .itp_det_head {padding:0 4px 0 4px; height:42px; background:#eee;}
+#ITP_CONTAINER .itp_detail .itp_det_head {padding:0 4px 0 4px; height:42px; background:#fff;}
 #ITP_CONTAINER .itp_detail .itp_det_head .itp_det_tit {font-size:15px; margin:0; padding:0; line-height:42px;}
 #ITP_CONTAINER .itp_detail .itp_det_head .itp_det_tit .glyphicon {color:#337ab7; margin-right:4px;}
 

src/main/webapp/js/app/main.js

@@ -54,7 +54,7 @@ var itp_fn_MAIN_NOTICE_grid = {
 				{
 					index: 'NTICE_TITL', name: 'nticeTitl',
 					label: '공지사항', //공지제목
-					width: '15', fixed: false, align: 'center',
+					width: '15', fixed: false, align: 'left',
 					sortable: false, hidden: false
 				},
 				{

src/main/webapp/login.html

@@ -30,39 +30,36 @@
 		<div class="itp_cont">
 			<div class="container">
 				<div class="itp_box_wrap">
-					<div class="itp_head fix">
-						<h1 class="itp_logo">오더퀸</h1>
-						<span class="itp_bar">|</span>
-						<h2 class="text-center itp_tit">수발주시스템</h2>
+					<div class="itp_login_img">
+						<img src="/oqpo-view/images/oqpologo.png" alt="로고" id="ITP_LOGIN_BRAND_LOGO" class="itp_img" name="" >
 					</div>
 					<div class="panel panel-default itp_box">
 						<div class="panel-body itp_body">
 							<form id="command" class="form-horizontal" action="" method="post" onsubmit="return false;">
 								<input id="userId" name="userId" type="hidden" value="" />
 	        					<input id="password" name="password" type="hidden" value="" />
-
-								<div class="row">
-									<div class="col-xs-9">
-										<div class="form-group">
-											<label class="col-xs-3 itp_lb">아이디</label>
-											<div class="col-xs-9">
-												<input type="text" class="form-control" id="ITP_FORM_LOGIN_USER_ID" autofocus>
-											</div>
+								<div class="row" style="margin-top:100px;">
+									<div class="col-xs-12 itp_login_input">
+										<div class="itp_head">
+											<h1 class="itp_logo">오더퀸</h1>
+											<span class="itp_bar">&nbsp;</span>
+											<h2 class="text-center itp_tit">수발주시스템</h2>
 										</div>
+									</div>	
+									<div class="col-xs-12">
 										<div class="form-group">
-											<label class="col-xs-3 itp_lb">비밀번호</label>
-											<div class="col-xs-9">
-												<input type="password" class="form-control" id="ITP_FORM_LOGIN_USER_PW" autocomplete="off">
+											<div class="col-xs-11 itp_login_input">
+												<input type="text" class="form-control itp_login" id="ITP_FORM_LOGIN_USER_ID" autofocus required="">
+												<label>아이디</label>
 											</div>
 										</div>
 										<div class="form-group">
-											<div class="col-xs-offset-3 col-xs-9">
-												<div class="checkbox pull-left">
-													<label><input type="checkbox" id="ITP_FORM_LOGIN_SAVE_ID"> 아이디저장</label>
-												</div>
+											<div class="col-xs-11 itp_login_input">
+												<input type="password" class="form-control itp_login" id="ITP_FORM_LOGIN_USER_PW" required="" autocomplete="off">
+												<label>비밀번호</label>
 											</div>
 										</div>
-										<div class="form-group">
+										<div class="form-group" style="display: none;">
 											<div class="col-xs-offset-3 col-xs-9">
 												<p class="text-nowrap itp_error" id="ITP_FORM_LOGIN_ERROR">
 												아이디와 비밀번호를 입력하세요.
@@ -70,15 +67,21 @@
 											</div>
 										</div>
 									</div>
-									<div class="col-xs-3">
-										<button type="submit" id="login_btn" class="btn btn-primary btn-lg itp_btn">로그인</button>
+									<div class="col-xs-12 itp_btn_bar">
+										<button type="submit" id="login_btn" class="btn btn-orange btn-lg itp_btn">로그인</button>
+									</div>
+									<div class="col-xs-12 itp_login_input">
+										<div class="form-group">
+											<div class="col-xs-12 itp_find">
+												<span>아이디/비밀번호 찾기</span>
+											</div>
+										</div>
 									</div>
 								</div>
 							</form>
 						</div>
 					</div>
-					<div class="panel panel-default text-center itp_foot">본 시스템은 크롬 브라우저에 최적화 되어 있습니다.</div>
-					<div class="text-center itp_copyright">COPYRIGHT © NOORIJA Co., Ltd. ALL RIGHTS RESERVED</div>
+					<div class="col-xs-12 itp_bottom_gray"></div>
 				</div>
 			</div>
 		</div>

src/main/webapp/main.html

@@ -47,7 +47,7 @@
 
 		<!-- 상단 -->
 		<header id="ITP_HEADER">
-			<div class="itp_head bg-primary">
+			<div class="itp_head bg-orange">
 				<h1 class="text-center itp_tit">
 					<span id="ITP_TXT_MAIN_SHR_AFFL">오더퀸</span>
 					<span style="font-size: 18px; margin-top: -3px">|</span>
@@ -55,7 +55,7 @@
 				</h1>
 				<div class="itp_lt">
 					<span class="itp_icon"><a href="javascript:void(0)" id="ITP_BTN_MENU"><i class="glyphicon glyphicon-align-justify"></i></a></span>
-					<span class="itp_icon"><a href="javascript:void(0)" id="ITP_BTN_HOME"><i class="glyphicon glyphicon-home"></i></a></span>
+					<span class="itp_icon"><a href="javascript:void(0)" id="ITP_BTN_HOME"><img src="/oqpo-view/images/oqpo.png" alt="로고" id="ITP_LOGIN_BRAND_LOGO" class="glyphicon-logo" name="" ></a></span>
 					<span class="itp_user" id="ITP_LOGIN_USER" style="cursor: pointer;"></span>
 				</div>
 				<div class="itp_rt">