Commit @132 - jhleem/egov

Files
Commit

한선우 2022-02-22 @132

로그인 디자인 수정

Index: base3.10/src/main/webapp/css/user/common.css =================================================================== --- base3.10/src/main/webapp/css/user/common.css (revision 131) +++ base3.10/src/main/webapp/css/user/common.css (revision 132) @@ -174,10 +174,11 @@ .footer { width:100%; padding:50px 0; background:#fafafa; position:relative; } .footer_content { display:flex; justify-content:space-between; } .footer_left { width:calc(100% - 250px); } -.footer_logo { display: flex; align-items: center; border-bottom:1px solid #ddd; margin-bottom:20px; padding-bottom:20px; } -.footer_logo a { text-transform:uppercase; font-weight:900; margin-right:15px; } +.footer_logo ul { display: flex; align-items: center; border-bottom:1px solid #ddd; margin-bottom:20px; padding-bottom:20px; } +.footer_logo a { text-transform:uppercase; font-weight:900; } .footer_logo a img { height:15px; } -.footer_logo a:last-child img { height:31px; } +.footer_logo ul li:last-child::before { width:1px; height:15px; background:#ccc; content:''; display:inline-block; margin:0 13px; } +.footer_logo ul li:last-child img { height:18px; } .footer_text { color:#727272; font-size:0.9em; line-height:1.7em; } .footer_text strong { margin-bottom:5px; display: block; color:#333; } @@ -488,19 +489,12 @@ #mapS { background:url(/images/user/map2.jpg) 50% 50% no-repeat; } /*로그인*/ -.login_wrap { width:100%; height:100vh; display:flex; justify-content:center; flex-direction:column; align-items:center; background:url(/images/user/main_bg.jpg) 50% 50% no-repeat; background-size:cover; } -.login_wrap .bg_logo { width:80%; height:250px; background:url(/images/user/logo_fff.svg) 50% 50% no-repeat; background-size:contain; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:0; animation:zoomInforLogin 1.5s ease-in-out both; } -.login_wrap::after { content:''; display:block; width:100%; height:100%; position:fixed; top:0; left:0; z-index:1; backdrop-filter: blur(13px); background:rgba(0,0,0,0.5); animation:fadeInforLogin .7s ease-in-out both; animation-delay:0.3s; } -.login_content { width:500px; position:relative; z-index:2; } -.login { width:100%; background:#fff; border-radius:20px; padding:40px 25px; border:1px solid #e9e9e9; box-shadow:0 0 20px 0 rgba(0,0,0,0.08); animation:fadeupInforLogin 0.7s ease-in-out both; animation-delay:0.5s; transition:0.5s; } -@keyframes zoomInforLogin { 0% { transform:translate(-50%,-50%) scale(.6); opacity:0; } 100% {transform:translate(-50%,-50%) scale(1); opacity:0.5; } } -@keyframes fadeupInforLogin { 0% { transform:translateY(50%); opacity:0; } 100% {transform:translateY(0%); opacity:1; } } -@keyframes fadeInforLogin { 0% { opacity:0; } 100% { opacity:1; } } -.login:hover { border:1px solid #ededed; box-shadow:0 0 40px 0 rgba(0,0,0,0.25);} -.login h1 { margin-bottom:25px; text-align:center; } -.login h1 img { height:15px; } +.login_wrap { width:100%; height:100vh; display:flex; justify-content:center; flex-direction:column; align-items:center; background:url(/images/user/bg_login.jpg) 50% 50% no-repeat; background-size:cover; } +.login_wrap::after { content:''; display:block; width:100%; height:100%; position:fixed; top:0; left:0; z-index:1; backdrop-filter: blur(15px); background:rgba(0,0,0,0.5); animation:fadeInforLogin .7s ease-in-out both; animation-delay:0.3s; } +.login_content { width:430px; position:relative; z-index:2; } +.login { width:100%; background:rgba(255,255,255,1); border-radius:30px; text-align:center; padding:40px 25px; opacity:0; backdrop-filter: blur(10px); animation:fadeupInforLogin 1s both; transition:0.5s; } .login li { width:100%; margin-top:10px; } -.login_input { display:flex; align-items:center; border:1px solid #ccc; justify-content:space-between; border-radius:5px; transition:all 0.3s;} +.login_input { display:flex; align-items:center; border:1px solid #ccc; background:#fff; justify-content:space-between; border-radius:5px; transition:all 0.3s;} .login_input:hover { box-shadow:0 0 10px 0 rgba(0,0,0,0.2); border-color:#999; } .login li .login_input label { width:50px; height:45px; display:flex; justify-content:center; align-items:center; } .login li:nth-child(1) .login_input label { background:url(/images/user/icon_login1.svg) 50% 50% no-repeat; background-size:20px 20px; } @@ -516,7 +510,30 @@ .login li .check { margin:0 3px 0 0; } .login li .check label { display:flex; align-items:center; } -.benefit { width:100%; margin-top:40px; text-align:left; } +.login_wrap h1 { margin-bottom:20px; } +.login_wrap h1 img { height:15px; } + +.login_wrap .bottom_content { position:fixed; bottom:0; left:0; width:100%; padding:50px 0; text-align:center; z-index:2; } +.login_wrap .bottom_content ul { display:flex; justify-content:center; align-items:center; margin-bottom:10px; } +.login_wrap .bottom_content ul li, .login_wrap .bottom_content .text strong, .login_wrap .bottom_content .text p { animation:fadeupInforLogin 0.7s ease-in-out both; } +.login_wrap .bottom_content ul li { animation-delay:0.2s; } +.login_wrap .bottom_content ul li:last-child { animation-delay:0.3s; } +.login_wrap .bottom_content ul li:last-child::before { width:1px; height:15px; background:#ccc; content:''; display:inline-block; margin:0 13px; } +.login_wrap .bottom_content ul li:last-child img { height:18px; } +.login_wrap .bottom_content a { text-transform:uppercase; font-weight:900; } +.login_wrap .bottom_content a img { height:15px; } +.login_wrap .bottom_content .text { color:rgba(255,255,255,0.6); font-size:0.9em; } +.login_wrap .bottom_content .text strong { display:block; animation-delay:0.4s; font-weight:400; font-size:1.1em; color:#fff; } +.login_wrap .bottom_content .text p { animation-delay:0.5s; line-height:1.6em; } +.login_wrap .bottom_content .text p:last-child { animation-delay:0.6s; } + +.loginbg { width:100%; height:100vh; position:fixed; top:0; left:0; z-index:0; } +.loginbg .bg_box { width:100%; height:100vh; } + +@keyframes fadeupInforLogin { 0% { transform:translateY(10%); opacity:0; } 100% {transform:translateY(-10%); opacity:1; } } +@keyframes fadeupInforLoginText { 0% { transform:translateY(50%); opacity:0; } 100% {transform:translateY(0%); opacity:0.6; } } + +/* .benefit { width:100%; margin-top:40px; text-align:left; } .benefit > p { margin-bottom:20px; } .benefit ul { display:flex; justify-content:center; flex-direction:column; border-top:2px solid #666;} .benefit li { display:flex; align-items:flex-start; width:100%; border-bottom:1px solid #e1e1e1; padding:25px 0; } @@ -525,7 +542,7 @@ .benefit li img { height:40px; } .benefit li .text { text-align:left; } .benefit li .text strong { display:block; font-size:1.2em; font-weight:600; color:#333; margin-bottom:7px; } -.benefit li .text p { font-size:0.9em; } +.benefit li .text p { font-size:0.9em; } */ @keyframes zoomIn { 0% { transform:scale(.6); opacity:0; } Index: base3.10/src/main/webapp/WEB-INF/tiles/template/defaultFooter.jsp =================================================================== --- base3.10/src/main/webapp/WEB-INF/tiles/template/defaultFooter.jsp (revision 131) +++ base3.10/src/main/webapp/WEB-INF/tiles/template/defaultFooter.jsp (revision 132) @@ -10,7 +10,12 @@ <button class="skip_top" type="button" title="맨위로가기" onclick="window.scrollTo(0,0);"><em class="blind">skip top</em></button> <div class="footer_content"> <div class="footer_left"> - <div class="footer_logo"> <a href="/" title="메인페이지로 이동"><img src="/images/user/logo.svg" alt="crossroards webzine 로고"></a> <a href="#!" title="apctp로 이동 [새창열림]"><img src="/images/user/logo_apctp.jpg" alt="apctp 로고"></a> </div> + <div class="footer_logo"> + <ul> + <li><a href="/" title="메인페이지로 이동"><img src="/images/user/logo.svg" alt="crossroards webzine 로고"></a></li> + <li><a href="https://www.apctp.org/" title="apctp로 이동 [새창열림]" target="_blank"><img src="/images/user/logo_apctp.svg" alt="apctp 로고"></a></li> + </ul> + </div> <div class="footer_text"> <strong>crossroards webzine은 아시아태평양이론물리센터에서 발행합니다.</strong> <p>(C) 2005~2022 Asia Pacific Center for Theoretical Physics ALL RIGHTS RESERVED. sc(at)apctp.org<br> 크로스로드는 정부의 과학기술진흥기금 및 복권기금 지원으로 국민과 함께하고 있습니다.</p> Index: base3.10/src/main/webapp/WEB-INF/jsp/egovframework/com/uat/uia/EgovLoginUsr.jsp =================================================================== --- base3.10/src/main/webapp/WEB-INF/jsp/egovframework/com/uat/uia/EgovLoginUsr.jsp (revision 131) +++ base3.10/src/main/webapp/WEB-INF/jsp/egovframework/com/uat/uia/EgovLoginUsr.jsp (revision 132) @@ -34,12 +34,16 @@ <meta http-equiv="content-type" content="text/html; charset=utf-8"> <%-- <link type="text/css" rel="stylesheet" href="<c:url value='/css/egovframework/com/com.css' />"> <link type="text/css" rel="stylesheet" href="<c:url value='/css/egovframework/com/uat/uia/login.css' />"> --%> +<link rel="icon" href="/images/user/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" type="text/css" href="/css/user/font.css" /> <link rel="stylesheet" type="text/css" href="/css/user/style.css" /> <link rel="stylesheet" type="text/css" href="/css/user/board.css" /> <link rel="stylesheet" type="text/css" href="/css/user/common.css" /> <link rel="stylesheet" type="text/css" href="/css/user/popup.css" /> <link rel="stylesheet" type="text/css" href="/css/user/responsive.css" /> + +<link rel="stylesheet" type="text/css" href="<c:url value='/css/user/swiper-bundle.css' ><c:param name="dt" value="${nowDate}"/></c:url>" /> +<script type="text/javascript" src="<c:url value='/js/user/swiper-bundle.js'><c:param name="dt" value="${nowDate}"/></c:url>"></script> <script type="text/javascript" src="<c:url value='/js/egovframework/com/cmm/showModalDialog.js'/>" ></script> <script type="text/javascript" src="<c:url value='/js/egovframework/com/cmm/jquery.js'/>" ></script> <script type="text/javaScript" language="javascript"> @@ -172,6 +176,7 @@ <noscript class="noScriptTitle"><spring:message code="common.noScriptTitle.msg" /></noscript>  <div class="login_wrap"> + <div class="login_content"> <div class="login"> <h1><a href="/" title="crossroards webzine 메인페이지로 이동"><img src="<c:url value='/images/user/logo.svg'/>" alt="crossroards webzine"></a></h1> @@ -196,9 +201,6 @@ </div> </li> <li> - <button type="button" class="btn_l width100p bg_navy" id="loginBtn" title="로그인" value="<spring:message code="comUatUia.loginForm.login"/>" onclick="actionLogin()">로그인</button>  - </li> - <li> <ul>  <c:set var="title"><spring:message code="comUatUia.loginForm.idSave"/></c:set> @@ -210,6 +212,9 @@ <%-- <li><a href="javascript:void(0);" class="link" onclick="goRegiUsr(); return false;"><spring:message code="comUatUia.loginForm.regist"/></a></li> --%>  </ul> </li> + <li> + <button type="button" class="btn_l width100p bg_navy" id="loginBtn" title="로그인" value="<spring:message code="comUatUia.loginForm.login"/>" onclick="actionLogin()">로그인</button>  + </li> </ul> </fieldset> <input name="userSe" type="hidden" value="USR"/> @@ -246,7 +251,27 @@ </ul> </div> --> </div> - <div class="bg_logo"></div> +  + <div class="bottom_content"> + <ul> + <li><a href="/" title="메인페이지로 이동"><img src="/images/user/logo_fff.svg" alt="crossroards webzine 로고"></a></li> + <li><a href="https://www.apctp.org/" title="apctp로 이동 [새창열림]" target="_blank"><img src="/images/user/logo_apctp_fff.svg" alt="apctp 로고"></a></li> + </ul> + <div class="text"> <strong>crossroards webzine은 아시아태평양이론물리센터에서 발행합니다.</strong> + <p>(C) 2005~2022 Asia Pacific Center for Theoretical Physics ALL RIGHTS RESERVED. sc(at)apctp.org</p> + <p>크로스로드는 정부의 과학기술진흥기금 및 복권기금 지원으로 국민과 함께하고 있습니다.ff</p> + </div> + </div> +</div> +<div class="loginbg"> + <div class="swiper"> + <div class="swiper-wrapper"> + <div class="swiper-slide bg_box" style="background-image:url(/images/user/bg_login1.jpg);"></div> + <div class="swiper-slide bg_box" style="background-image:url(/images/user/bg_login2.jpg);"></div> + <div class="swiper-slide bg_box" style="background-image:url(/images/user/bg_login3.jpg);"></div> + <div class="swiper-slide bg_box" style="background-image:url(/images/user/bg_login4.jpg);"></div> + </div> + </div> </div>  <form name="defaultForm" action ="" method="post" target="_blank"> @@ -255,9 +280,17 @@ </div> </form>  - - - +<script> +var swiper = new Swiper(".swiper", { + effect: "fade", + centeredSlides: true, + speed: 3000, + autoplay: { + delay: 3000, + disableOnInteraction: false, + }, + }); +</script> </body> </html> Index: base3.10/src/main/webapp/images/user/logo_apctp.jpg =================================================================== Cannot display: file marked as a binary type. svn:mime-type = application/octet-stream Index: base3.10/src/main/webapp/images/user/bg_login1.jpg =================================================================== Cannot display: file marked as a binary type. svn:mime-type = application/octet-stream Property changes on: base3.10/src/main/webapp/images/user/bg_login1.jpg ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Index: base3.10/src/main/webapp/images/user/bg_login2.jpg =================================================================== Cannot display: file marked as a binary type. svn:mime-type = application/octet-stream Property changes on: base3.10/src/main/webapp/images/user/bg_login2.jpg ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Index: base3.10/src/main/webapp/images/user/bg_login3.jpg =================================================================== Cannot display: file marked as a binary type. svn:mime-type = application/octet-stream Property changes on: base3.10/src/main/webapp/images/user/bg_login3.jpg ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Index: base3.10/src/main/webapp/images/user/bg_login4.jpg =================================================================== Cannot display: file marked as a binary type. svn:mime-type = application/octet-stream Property changes on: base3.10/src/main/webapp/images/user/bg_login4.jpg ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Index: base3.10/src/main/webapp/images/user/logo_apctp_fff.svg =================================================================== --- base3.10/src/main/webapp/images/user/logo_apctp_fff.svg (nonexistent) +++ base3.10/src/main/webapp/images/user/logo_apctp_fff.svg (revision 132) @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="utf-8"?> + +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 535.8 156.6" style="enable-background:new 0 0 535.8 156.6;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#FFFFFF;} +</style> +<g> + <g> + <g> + <g> + <path class="st0" d="M454.9,156.6h-28.2V68.8c0-30.1,24.5-54.6,54.6-54.6c30.1,0,54.6,24.5,54.6,54.6 + c0,30.1-24.5,54.6-54.6,54.6h-16.4V95.2h16.4c14.6,0,26.4-11.8,26.4-26.4c0-14.5-11.8-26.4-26.4-26.4 + c-14.5,0-26.4,11.8-26.4,26.4V156.6z"/> + </g> + <path class="st0" d="M405.5,95.2c-14.6,0-26.4-11.8-26.4-26.4V43.7h35.5V17.2h-35.5V0h-28.2v68.8c0,30.1,24.5,54.6,54.6,54.6 + h11.2V95.2H405.5z"/> + </g> + </g> + <g> + <path class="st0" d="M234.3,69.3v-0.4c0-30.4,23.7-56.2,55.1-56.2c20.4,0,33.1,8.5,43.1,19.1L321.9,43 + c-8.5-8.9-18.1-16.2-32.7-16.2c-21.8,0-38.5,18.5-38.5,41.6v0.4c0,23.3,17.1,41.8,39.5,41.8c13.7,0,24.3-6.9,32.9-16l10.2,9.6 + c-10.8,12.1-23.7,20.8-43.9,20.8C258,125,234.3,99.4,234.3,69.3z"/> + <path class="st0" d="M99,59c0-26-16.4-45.7-47.9-45.7c-16.3,0-28.1,3.7-40.4,9.2l4.9,13.1c10.2-4.8,20.6-7.7,33.7-7.7 + c21.4,0,32.8,9.9,32.8,30V61c-8.4-2.5-19.8-5.2-34.5-5.2C18,55.7,0,69.4,0,90.2c0,24.9,25.8,34.5,45.1,34.5c21.1,0,54-8.7,54-57.4 + V59z M16.7,89.8C16.7,78,29,68.4,49.5,68.4c15.4,0,26,2.1,32.8,4.7v2.4c0,21.9-15,36-37.2,36C31.3,111.5,16.7,103.4,16.7,89.8z"/> + <path class="st0" d="M113.7,156.6h16V105c7.1,11.4,22.5,19.4,37.4,19.7c1.2,0.1,2.5,0.1,3.8,0.1c26,0,51.4-20.8,51.4-56v-0.4 + c0-35.4-26.2-55.7-52-55.7c-43,0-56.6,30.9-56.6,59.2V156.6z M205.8,69c0,26-17.1,41.4-37.9,41.4c-20,0-38.9-16.6-38.9-41.6v-0.4 + C129.1,43.9,148,27,168,27c20.4,0,37.9,16.2,37.9,41.6V69z"/> + </g> +</g> +</svg> Index: base3.10/src/main/webapp/images/user/logo_apctp.svg =================================================================== --- base3.10/src/main/webapp/images/user/logo_apctp.svg (nonexistent) +++ base3.10/src/main/webapp/images/user/logo_apctp.svg (revision 132) @@ -0,0 +1,33 @@ +<?xml version="1.0" encoding="utf-8"?> + +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 535.8 156.6" style="enable-background:new 0 0 535.8 156.6;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#78B6E4;} + .st1{fill:#002139;} +</style> +<g> + <g> + <g> + <g> + <path class="st0" d="M454.9,156.6h-28.2V68.8c0-30.1,24.5-54.6,54.6-54.6c30.1,0,54.6,24.5,54.6,54.6 + c0,30.1-24.5,54.6-54.6,54.6h-16.4V95.2h16.4c14.6,0,26.4-11.8,26.4-26.4c0-14.5-11.8-26.4-26.4-26.4 + c-14.5,0-26.4,11.8-26.4,26.4V156.6z"/> + </g> + <path class="st0" d="M405.5,95.2c-14.6,0-26.4-11.8-26.4-26.4V43.7h35.5V17.2h-35.5V0h-28.2v68.8c0,30.1,24.5,54.6,54.6,54.6 + h11.2V95.2H405.5z"/> + </g> + </g> + <g> + <path class="st1" d="M234.3,69.3v-0.4c0-30.4,23.7-56.2,55.1-56.2c20.4,0,33.1,8.5,43.1,19.1L321.9,43 + c-8.5-8.9-18.1-16.2-32.7-16.2c-21.8,0-38.5,18.5-38.5,41.6v0.4c0,23.3,17.1,41.8,39.5,41.8c13.7,0,24.3-6.9,32.9-16l10.2,9.6 + c-10.8,12.1-23.7,20.8-43.9,20.8C258,125,234.3,99.4,234.3,69.3z"/> + <path class="st1" d="M99,59c0-26-16.4-45.7-47.9-45.7c-16.3,0-28.1,3.7-40.4,9.2l4.9,13.1c10.2-4.8,20.6-7.7,33.7-7.7 + c21.4,0,32.8,9.9,32.8,30V61c-8.4-2.5-19.8-5.2-34.5-5.2C18,55.7,0,69.4,0,90.2c0,24.9,25.8,34.5,45.1,34.5c21.1,0,54-8.7,54-57.4 + V59z M16.7,89.8C16.7,78,29,68.4,49.5,68.4c15.4,0,26,2.1,32.8,4.7v2.4c0,21.9-15,36-37.2,36C31.3,111.5,16.7,103.4,16.7,89.8z"/> + <path class="st1" d="M113.7,156.6h16V105c7.1,11.4,22.5,19.4,37.4,19.7c1.2,0.1,2.5,0.1,3.8,0.1c26,0,51.4-20.8,51.4-56v-0.4 + c0-35.4-26.2-55.7-52-55.7c-43,0-56.6,30.9-56.6,59.2V156.6z M205.8,69c0,26-17.1,41.4-37.9,41.4c-20,0-38.9-16.6-38.9-41.6v-0.4 + C129.1,43.9,148,27,168,27c20.4,0,37.9,16.2,37.9,41.6V69z"/> + </g> +</g> +</svg>

Add a comment

List

Delete comment