7354.로그인페이지 눈알추가 변경
This commit is contained in:
iyak
parent
38e7787560
commit
a8ba46b5ea
|
|
@ -5,22 +5,31 @@
|
|||
var googleClientId = ViewBag.googleClientID;
|
||||
}
|
||||
<head>
|
||||
<script type="text/javascript" src="/js/naveridlogin_js_sdk_2.0.0.js"></script>
|
||||
@*<script type="text/javascript" src="/js/naveridlogin_js_sdk_2.0.0.js"></script>
|
||||
<script type="text/javascript" src="/js/kakao.js"></script>
|
||||
<script src="https://apis.google.com/js/platform.js?onload=googleInit" async defer></script>
|
||||
<script src="https://apis.google.com/js/platform.js?onload=googleInit" async defer></script>*@
|
||||
|
||||
<!--로그인페이지 CSS -->
|
||||
<link href="~/css/login.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<form id="mform" action="" method="post">
|
||||
<div class="lgnWrap">
|
||||
<ul class="lgnForm">
|
||||
<li><input type="text" name="uid" id="uid" placeholder="아이디" value="@ViewBag.SavedId" /></li>
|
||||
<li><input type="password" name="upw" id="upw" placeholder="비밀번호" /></li>
|
||||
<li>
|
||||
<input type="text" name="uid" id="uid" placeholder="아이디" value="@ViewBag.SavedId" />
|
||||
</li>
|
||||
<li>
|
||||
<input type="password" name="upw" id="upw" placeholder="비밀번호" />
|
||||
<button type="button" id="togglePassword" class="toggle-password-btn"></button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="lgnChk">
|
||||
<input type="checkbox" name="issaveid" id="issaveid" @(ViewBag.SavedId == "" ? "" : "checked")>
|
||||
<label for="issaveid">아이디저장</label>
|
||||
</div>
|
||||
<p style="margin-bottom: 30px; border: 1px solid red; padding: 5px;">※ 2021년 7월 1일 이전에 회원가입을 하신 분 들은 본인인증을 위하여 회원가입을 다시 진행 해주시길 부탁드립니다.</p>
|
||||
<a href="#" class="lgnBtn" onclick="login();">로그인</a>
|
||||
<a href="javascript:void(0);" class="lgnBtn" onclick="login();">로그인</a>
|
||||
|
||||
<ul class="lgnFind">
|
||||
<li><a href="/Account/FindMe">아이디/비밀번호찾기</a></li>
|
||||
|
|
@ -29,20 +38,18 @@
|
|||
|
||||
<br />
|
||||
|
||||
<div id="naverIdLogin" style="display:none"></div>
|
||||
@*<div id="naverIdLogin" style="display:none"></div>*@
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
if (opener != null && opener._ismain == 1) {
|
||||
opener.location.href = "/Account/Index";
|
||||
self.close();
|
||||
}
|
||||
//else if (ViewBag.gossl == 1 && location.href.substr(0, 5) == 'http:') {
|
||||
// location.href = 'https'+location.href.substr(4);
|
||||
//}
|
||||
else {
|
||||
if (!ismobile()) {
|
||||
if (val("uid").length > 0) { focus("upw"); } else { focus("uid"); }
|
||||
|
|
@ -71,7 +78,24 @@
|
|||
}
|
||||
});
|
||||
}
|
||||
snsInit();
|
||||
|
||||
/** INPUT 패스워드 눈알처리 */
|
||||
$('.lgnForm').on('click', '#togglePassword', function () {
|
||||
const passwordInput = $('#upw');
|
||||
|
||||
if (passwordInput.length > 0) {
|
||||
if (passwordInput[0].type === 'password') {
|
||||
passwordInput[0].type = 'text';
|
||||
} else {
|
||||
passwordInput[0].type = 'password';
|
||||
}
|
||||
}
|
||||
|
||||
$(this).toggleClass('is-toggled');
|
||||
});
|
||||
|
||||
/* snsInit(); */
|
||||
|
||||
});
|
||||
|
||||
function login() {
|
||||
|
|
@ -133,7 +157,8 @@
|
|||
else if (capResult.msg == "-4") { // 비번틀림
|
||||
++logincnt;
|
||||
if (logincnt > 4) {
|
||||
msg("비밀번호 5회 이상 오류로 로그인이 제한되었습니다.\n교육원으로 문의해주세요.");
|
||||
//msg("비밀번호 5회 이상 오류로 로그인이 제한되었습니다.\n교육원으로 문의해주세요.");
|
||||
msg("해당 계정은 로그인이 제한된 계정 입니다.<br/>교육원으로 문의 주세요.<br/>T : 1544-7660<br/>");
|
||||
logincnt = 0;
|
||||
}
|
||||
else {
|
||||
|
|
@ -141,7 +166,8 @@
|
|||
}
|
||||
}
|
||||
else if (capResult.msg == "-5") { // 비활성상태
|
||||
msg("비밀번호 5회 이상 오류로 로그인이 제한되었습니다.\n교육원으로 문의해주세요.");
|
||||
//msg("비밀번호 5회 이상 오류로 로그인이 제한되었습니다.\n교육원으로 문의해주세요.");
|
||||
msg("해당 계정은 로그인이 제한된 계정 입니다.<br/>교육원으로 문의 주세요.<br/>T : 1544-7660<br/>");
|
||||
}
|
||||
else if (capResult.msg == "-6") { // 탈퇴신청중
|
||||
msg("회원탈퇴가 접수되었습니다.<br/>탈퇴 완료까지 평일 기준 1일 정도 소요될 예정입니다.");
|
||||
|
|
@ -156,4 +182,5 @@
|
|||
}
|
||||
} else { msg("입력하신 아이디/비밀번호와 일치하는 계정이 없습니다. 다시 확인해주세요.<br/>5회이상 비밀번호 오류 시 로그인이 제한됩니다."); }
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
/* MS Edge 브라우저의 자체 비밀번호 보기 아이콘 숨기기 */
|
||||
input[type="password"]::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 아이콘 버튼 기본 스타일 */
|
||||
#togglePassword {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
/* 버튼 크기를 직접 지정 */
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 4px; /* SVG 아이콘 주변 여백을 위해 padding 사용 */
|
||||
/* 배경이미지 설정 */
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 20px 20px; /* 아이콘 크기 */
|
||||
}
|
||||
|
||||
/* 기본 상태 (보이는 눈 아이콘) */
|
||||
#togglePassword {
|
||||
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23888"%3E%3Cpath d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/%3E%3C/svg%3E');
|
||||
}
|
||||
|
||||
#togglePassword.is-toggled {
|
||||
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23888"%3E%3Cpath d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.44-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L21.73 22 20.46 23.27 3.27 6 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/%3E%3C/svg%3E');
|
||||
}
|
||||
|
||||
.lgnForm li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lgnForm input[type="password"] {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.lgnForm input[type="text"],
|
||||
.lgnForm input[type="password"] {
|
||||
border: 1px solid #ccc; /* 테두리를 깔끔하게 정의 */
|
||||
border-radius: 6px; /* ★ 여기가 라운딩 값입니다 ★ */
|
||||
transition: border-color 0.2s ease-in-out; /* 클릭 시 색상 변경을 부드럽게 */
|
||||
}
|
||||
|
||||
.lgnForm input[type="text"]:focus,
|
||||
.lgnForm input[type="password"]:focus {
|
||||
outline: none;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.lgnChk input[type="checkbox"] {
|
||||
border-radius: 4px; /* 체크박스 모서리 둥글게 */
|
||||
/* 필요하다면 기본 체크박스 크기 조절 */
|
||||
/* width: 16px; */
|
||||
/* height: 16px; */
|
||||
}
|
||||
|
||||
/* 체크박스 레이블과 간격 조절 (선택 사항) */
|
||||
.lgnChk label {
|
||||
vertical-align: middle; /* 체크박스와 텍스트를 같은 줄에 정렬 */
|
||||
margin-left: 5px; /* 체크박스와 텍스트 사이 간격 */
|
||||
}
|
||||
|
||||
/* 기존 체크박스는 안 보이게 숨김 처리 */
|
||||
.lgnChk input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 가짜 체크박스가 될 label의 기본 스타일 */
|
||||
.lgnChk label {
|
||||
position: relative; /* 자식 요소 위치 기준 */
|
||||
padding-left: 28px; /* 아이콘이 들어갈 공간 확보 */
|
||||
cursor: pointer;
|
||||
font-size: 16px; /* 폰트 크기 (필요시 조절) */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 가짜 체크박스 테두리 만들기 (::before 가상 요소) */
|
||||
.lgnChk label::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #aaa;
|
||||
border-radius: 6px;
|
||||
background-color: #fff;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* ★ 실제 체크박스가 체크되었을 때 ★ 가짜 체크박스 스타일 변경 */
|
||||
.lgnChk input[type="checkbox"]:checked + label::before {
|
||||
background-color: #007bff; /* 배경색 채우기 */
|
||||
border-color: #007bff; /* 테두리색 변경 */
|
||||
}
|
||||
|
||||
/* 체크 표시 만들기 (::after 가상 요소) */
|
||||
.lgnChk label::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 50%;
|
||||
transform: translateY(-60%) rotate(45deg); /* 위치 및 각도 조절 */
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
opacity: 0; /* 평소에는 안 보이게 */
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* ★ 실제 체크박스가 체크되었을 때 ★ 체크 표시 보여주기 */
|
||||
.lgnChk input[type="checkbox"]:checked + label::after {
|
||||
opacity: 1; /* 보이게 처리 */
|
||||
}
|
||||
|
|
@ -6761,7 +6761,7 @@ html.lock, body.lock {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.lgnBtn {
|
||||
/*.lgnBtn {
|
||||
display: block;
|
||||
text-align: center;
|
||||
height: 60px;
|
||||
|
|
@ -6769,8 +6769,39 @@ html.lock, body.lock {
|
|||
background: #0047a7;
|
||||
color: #fff !important;
|
||||
font-size: 14pt;
|
||||
}*/
|
||||
|
||||
.lgnBtn {
|
||||
display: block;
|
||||
text-align: center;
|
||||
height: 60px;
|
||||
line-height: 60px; /* height와 동일하게 맞춰 텍스트 수직 중앙 정렬 */
|
||||
background: #0047a7;
|
||||
color: #fff !important;
|
||||
font-size: 14pt;
|
||||
|
||||
border: none; /* 테두리 제거 */
|
||||
border-radius: 8px; /* 둥근 모서리 처리 */
|
||||
text-decoration: none; /* a 태그의 밑줄 제거 */
|
||||
cursor: pointer; /* 마우스 오버 시 손가락 모양 커서 */
|
||||
font-weight: bold; /* 폰트 약간 두껍게 */
|
||||
transition: all 0.2s ease-in-out; /* 모든 효과를 부드럽게 전환 */
|
||||
box-sizing: border-box; /* 패딩, 테두리가 너비/높이에 포함되도록 */
|
||||
}
|
||||
|
||||
/* ★ 마우스를 올렸을 때 효과 */
|
||||
.lgnBtn:hover {
|
||||
background: #003b8e; /* 살짝 더 어두운 파란색 */
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 입체감을 주는 그림자 */
|
||||
}
|
||||
|
||||
/* ★ 클릭했을 때 효과 */
|
||||
.lgnBtn:active {
|
||||
background: #002f73; /* 더 어두운 파란색 */
|
||||
box-shadow: none; /* 그림자 제거 */
|
||||
transform: translateY(2px); /* 아래로 살짝 눌리는 느낌 */
|
||||
}
|
||||
|
||||
.lgnMenu {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue