728x90
반응형
※ 중국어 번역은 시간관계상 생략
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>네이버 로그인</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="./css/header.css">
<link rel="stylesheet" type="text/css" href="./css/container.css">
<link rel="stylesheet" type="text/css" href="./css/more_easy.css">
<link rel="stylesheet" type="text/css" href="./css/info.css">
<link rel="stylesheet" type="text/css" href="./css/whale.css">
<link rel="stylesheet" type="text/css" href="./css/footer.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/app.js"></script>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>
<a href="#" class="naver_logo"></a>
</h1>
<div class="lang">
<select id="lang_option">
<option value="한국어" name="lang">한국어</option>
<option value="English" name="lang">English</option>
<option value="中文(简体)" name="lang">中文(简体)</option>
<option value="中文(台灣)" name="lang">中文(台灣)</option>
</select>
</div>
</div>
<div id="container">
<fieldset class="login_form">
<div class="id_area">
<div class="input_row">
<span class="input_box">
<label for="id"></label>
<input type="text" id="id" placeholder="아이디">
</span>
</div>
</div>
<div class="pw_area">
<div class="input_row">
<span class="input_box">
<label for="pw"></label>
<input type="text" id="pw" placeholder="비밀번호">
</span>
</div>
</div>
<input type="submit" value="로그인" id="login">
<div class="check_info">
<div class="login_check">
<span class="login_on">
<input type="checkbox" class="login_on" id="login_chk">
</span>
<label for="login_chk">로그인 상태 유지</label>
</div>
<div class="pc_check">
<a herf="#">
IP 보안
</a>
<span class="ip_on">
<input type="checkbox" class="off" id="ip_chk">
</span>
</div>
</div>
<div class="more_easy">
<h1>더욱 간편한 로그인</h1>
<div class="button_area">
<button class="qr_btn">
<span class="qr_img"></span>
QR코드 로그인
</button>
<button class="once_btn">
<span class="once_img"></span>
일회용 번호 로그인
</button>
</div>
<div class="safe_notice">
<span>PC방 등 공용 PC라면 안전하게 사용해 보세요.</span>
<img src="./images/m_nudge_close.png">
</div>
<span class="tri"></span>
</div>
<div class="other_country">
<button><span class="qr_img"></span>Sign in with QR code</button>
<button><span class="facebook"></span>Facebook</button>
<button><span class="line"></span>line</button>
</div>
<div class="info">
<ul>
<li><a href="#"><span id="a">아이디 찾기</span></a><span class="bar"></span></li>
<li id="d"><a href="#"><span id="b">비밀번호 찾기</span></a><span class="bar"></span></li>
<li><a href="#"><span id="c">회원가입</span></a></li>
</ul>
</div>
</fieldset>
<div class="whale_wrap">
<img src="./images/whale.png">
</div>
<footer id="footer">
<ul>
<li><a href="#">이용약관</a><span class="bar"></span></li>
<li><a href="#">개인정보처리방침</a><span class="bar"></span></li>
<li><a href="#">책임의 한계와 법적고지</a><span class="bar"></span></li>
<li><a href="#">회원정보 고객센터</a></li>
</ul>
<div class="copyright">
<div class="copy_area">
<span class="naver_small_logo">
</span>
<span>
<small>Copyright © <span>NAVER Corp.</span> All Rights Reserved.</small>
</span>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
$(function(){
changeLag()
})
function changeLag(){
$("select").change(function(){
var lang = this.value
if(this.value=='English'){
$(".button_area").hide()
$(".more_easy > h1").text('Easier sign in')
$(".once_btn").hide()
$(".more_easy").css('height','68px')
$('.whale_wrap').hide()
$(".other_country").show()
$("#id").attr("placeholder","username")
$("#pw").attr("placeholder","password")
$("#login").attr("value","Sign in")
$(".login_check>label").text("Stay Signed in")
$(".login_on").addClass('login_off')
$(".login_on").removeClass('login_on')
$(".pc_check").hide()
$("#a").text('Forgot your Username or Password')
$("#c").text('sign up')
$("#d").hide()
$(".safe_notice > span").text('this PC is used by multiple people, try it')
} else if(lang == '中文(简体)') {
$(".button_area").hide()
$(".more_easy > h1").text('Easier sign in')
$(".once_btn").hide()
$(".more_easy").css('height','68px')
$('.whale_wrap').hide()
$(".other_country").show()
$("#id").attr("placeholder","중국어아이디")
$("#pw").attr("placeholder","중국어비번")
$("#login").attr("value","Sign in")
$(".login_check>label").text("중국어 로그인유지")
$(".login_on").addClass('login_off')
$(".login_on").removeClass('login_on')
$(".pc_check").hide()
$("#a").text('Forgot your Username or Password')
$("#c").text('sign up')
$("#d").hide()
$(".safe_notice > span").text('this PC is used by multiple people, try it')
} else if(lang == "中文(台灣)") {
$(".button_area").hide()
$(".more_easy > h1").text('Easier sign in')
$(".once_btn").hide()
$(".more_easy").css('height','68px')
$('.whale_wrap').hide()
$(".other_country").show()
$("#id").attr("placeholder","다른중국어아이디")
$("#pw").attr("placeholder","다른중국어비번")
$("#login").attr("value","Sign in")
$(".login_check>label").text("다른중국어 로그인유지")
$(".login_on").addClass('login_off')
$(".login_on").removeClass('login_on')
$(".pc_check").hide()
$("#a").text('Forgot your Username or Password')
$("#c").text('sign up')
$("#d").hide()
$(".safe_notice > span").text('this PC is used by multiple people, try it')
} else if(lang == '한국어') {
$(".button_area").show()
$(".more_easy > h1").text('더욱 간편한 로그인')
$(".once_btn").show()
$(".more_easy").css('height','138px')
$('.whale_wrap').show()
$(".other_country").hide()
$("#id").attr("placeholder","아이디")
$("#pw").attr("placeholder","비밀번호")
$("#login").attr("value","로그인")
$(".login_check>label").text("로그인 상태 유지")
$(".login_off").addClass('login_on')
$(".login_off").removeClass('login_off')
$(".pc_check").show()
$("#a").text('아이디찾기')
$("#c").text('회원가입')
$(".safe_notice > span").text('PC방 등 공용 PC라면 안전하게 사용해 보세요')
$("#d").show()
}
})
}
728x90
반응형
'HTML+CSS(실습)' 카테고리의 다른 글
| ★ 2023-06-07(수) 배달의민족 주문페이지(checked) (0) | 2023.06.07 |
|---|---|
| ★2023-06-04(일) 스탑워치 (0) | 2023.06.04 |
| 2023-05-17(수) 헤더분리(addClass , fixed,window scroll) (0) | 2023.05.17 |
| ★2023-05-16(화) 피아노건반실습(keydown,keycode) (0) | 2023.05.16 |
| ★2023-05-03(수) 회원가입 약관동의( is(":checked") ) (0) | 2023.05.05 |