<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
<title>MUTE</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<main>
<header>
<div>MUTE</div>
<nav>≡</nav>
</header>
<div>
<h1>Silent but Powerful</h1>
<p data-key="mainDesc">고요하지만 강력한 흔적</p>
<button data-key="mainBtn">자세히 보기</button>
</div>
</main>
<article class="power-text">
<h2 data-key="powerTitle1">THE ULTIMATE MANLINESS</h2>
<div class="vertical-line"></div>
</article>
<article class="power">
<div>
<h2 data-key="powerTitle2">POWER IN SILENCE</h2>
<p data-key="powerDesc1">
MUTE는 단순히 향기를 파는 것이 아니라, 당신의 존재감을 증명하는 보이지 않는 수트를 제안합니다.<br>
</p>
<p data-key="powerDesc2">
고요함 속에 잠재된 폭발적인 에너지를 경험하세요. 한 번의 분사로 세상을 당신의 향기로 채우세요.<br>
</p>
<button data-key="powerBtn">브랜드 가이드</button>
</div>
</article>
<article class="house-text">
<h2 data-key="houseTitle">CURATED FRAGRANCE HOUSE</h2>
<p data-key="houseDesc">
당신을 위한 프리미엄 향기 큐레이션<br />
전 세계에서 엄선된 니치 향수부터 트렌디한 브랜드까지, 당신의 분위기에 맞는 최적의 향을 제안합니다.
</p>
</article>
<article class="house">
<section>
<div>
<h3>JO MALONE LONDON</h3>
<button data-key="discoverBtn">보러가기</button>
</div>
</section>
<section class="video-hover-box">
<video
src="https://www.yslbeautykr.com/on/demandware.static/-/Sites-ysl-kr-ng-Library/ko_KR/dwc52a8873/pdp/APAC-1004728-YSL/240821/APAC-1004728-YSL_video_02.mp4"
poster="https://images.unsplash.com/photo-1700473209752-395910c89003?q=80&w=2070" muted loop playsinline
autoplay>
</video>
<div class="content">
<h3>YVES SAINT LAURENT</h3>
<button data-key="discoverBtn">보러가기</button>
</div>
</section>
<section>
<div>
<h3>VERSACE</h3>
<button data-key="discoverBtn">보러가기</button>
</div>
</section>
</article>
<article class="our-text">
<h2 data-key="ourTitle">OUR SIGNATURE SERVICES</h2>
<p data-key="ourDesc">
오직 뮤트에서만 경험할 수 있는 특별함<br>단순한 향수 구매를 넘어, 당신의 삶에 깊게 스며들 수 있는 특별한 가치를 제안합니다. <br>전문가의 섬세한 터치로 완성되는 퍼스널 조향부터 전 세계 유수의
니치 향수를 직접 경험할 수 있는 오프라인 스토어까지, 오직 뮤트(MUTE)에서만 허락된 감도 높은 프리미엄 서비스를 지금 바로 확인해 보세요.
</p>
</article>
<article class="our">
<section>
<div>
<button data-key="ourBtn1">테마별 큐레이션</button>
</div>
</section>
<section>
<div>
<button data-key="ourBtn2">퍼스널 향수</button>
</div>
</section>
<section>
<div>
<button data-key="ourBtn3">디스커버리 키트</button>
</div>
</section>
<section>
<div>
<button data-key="ourBtn4">매장 안내</button>
</div>
</section>
</article>
<article class="partner">
<h2 data-key="partnerTitle">PARTNER BRANDS</h2>
<div>
<img
src="https://blog.kakaocdn.net/dna/muR4Y/dJMcag6gQAG/AAAAAAAAAAAAAAAAAAAAAKUv1rlzBVFxk1B9MNyox2yoysfkHjGSHYQFimT920nE/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=XGnSuaPu8IzMZ8Z87lFR7aqMfA4%3D">
<img
src="https://blog.kakaocdn.net/dna/b2LDxX/dJMcaf7laGB/AAAAAAAAAAAAAAAAAAAAAMu_sGOOM0yJmartaUSAB_gjW2MjF3AcU1zVFkXo3DPp/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=pdfLYJANSEeksb3lwHjXnerbVOI%3D">
<img
src="https://blog.kakaocdn.net/dna/1dJLR/dJMcagd8Hb7/AAAAAAAAAAAAAAAAAAAAAO7MyQz38pSIghTCFDNYg7-VzTRQBssSfUGYDyiN8H4U/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=%2B1DZTLCC%2FWcFePb7DfYUS7n4QeE%3D">
<img
src="https://blog.kakaocdn.net/dna/0yOsK/dJMcag6gQAF/AAAAAAAAAAAAAAAAAAAAAFE9p8ZUn3jI5B7eDH85UdP29i01RKHvYfdDEqCieFUJ/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=krVbBxIA1WY8rkqfAHldj%2B8dK3M%3D">
<img
src="https://blog.kakaocdn.net/dna/Dm79S/dJMb990pdX4/AAAAAAAAAAAAAAAAAAAAAN_Dqx6vAOZrdgqBHIqPSWDPxXeyhHnLPUx0jnC0W7mJ/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=cgm9KP5Zcudxhj53c3gvNeejCVI%3D">
<img
src="https://blog.kakaocdn.net/dna/eoOpic/dJMcag6gQAE/AAAAAAAAAAAAAAAAAAAAAIzGO2PjG8LdAEnjKtOGFaysT8TvgsHF0RkWhdpWovkT/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=xAQCcahiQbi9D6hyOMQFgTBIpv4%3D">
</div>
<div>
<p data-key="partnerDesc">함께하는 프리미엄 파트너</p>
</div>
</article>
<article class="guides">
<h2 data-key="guidesTitle">향의 깊이 가이드</h2>
<p data-key="guidesSub">지속시간에 따른 향수의 종류 알아보기</p>
<table>
<tr>
<td width="150px" data-key="th1">등급</td>
<td width="150px" data-key="th2">부향률</td>
<td width="200px" data-key="th3">지속 시간</td>
<td width="400px" data-key="th4">특징</td>
</tr>
<tr>
<td data-key="td1_1">퍼퓸</td>
<td>15% ~ 30%</td>
<td data-key="td1_2">7 ~ 8시간 이상</td>
<td data-key="td1_3">가장 깊고 풍부한 향, 특별한 날 추천</td>
</tr>
<tr>
<td data-key="td2_1">오드 퍼퓸</td>
<td>10% ~ 15%</td>
<td data-key="td2_2">5시간 전후</td>
<td data-key="td2_3">대중적이며 선명한 발향, 데일리용</td>
</tr>
<tr>
<td data-key="td3_1">오드 뚜왈렛</td>
<td>5% ~ 10%</td>
<td data-key="td3_2">3 ~ 4시간 전후</td>
<td data-key="td3_3">가볍고 부드러운 느낌, 캐주얼한 사용</td>
</tr>
</table>
</article>
<footer>
<div>
<h2>ORDER</h2>
<p data-key="footerDesc">비회원 주문 조회 및 배송 현황</p>
<form>
<div>
<label for="name" data-key="footerName">이름</label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="order-num" data-key="footerOrderNum">주문번호</label>
<input type="text" name="order-num" id="order-num">
</div>
<div>
<label for="password" data-key="footerPw">구매 비밀번호</label>
<input type="password" name="password" id="password">
</div>
<div>
<button type="submit" name="submit" id="submit" data-key="footerBtn">조회</button>
</div>
</form>
</div>
</footer>
<address>
<div>
<h2 data-key="addressTitle">STAY IN MUTE</h2>
<p data-key="addressDesc">서울특별시 강남구 테헤란로 123, 뮤트 빌딩 15층<br>TEL: 02-1234-5678<br>EMAIL: info@mute.com</p>
</div>
</address>
<div class="langs" id="lang-btn">EN</div>
</body>
</html>@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
@import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap");
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
word-break: keep-all;
outline: 0px solid silver;
}
img {
width: 100px;
}
body {
background: black;
font-family: "Roboto", "pretendard", sans-serif;
font-size: 0.9rem;
line-height: 1rem;
color: #ddd;
letter-spacing: 0.1px;
}
h1,
h2,
h3 {
font-family: "Oswald", "pretendard", sans-serif;
}
h1 {
font-size: 4rem;
line-height: 4rem;
text-transform: uppercase;
}
h2 {
font-size: 2.4rem;
line-height: 2.4rem;
text-transform: uppercase;
margin-bottom: 1rem;
text-align: center;
}
h3 {
font-size: 1.4rem;
line-height: 1.4rem;
}
h4,
h5 {
font-family: "Playfair Display", "pretendard", serif;
}
h4 {
font-size: 1.1rem;
line-height: 1.1rem;
}
h5 {
font-size: 0.7rem;
line-height: 0.7rem;
}
a:link {
color: #666;
text-decoration: none;
}
a:visited {
color: #666;
}
a:hover {
color: red;
}
a:active {
color: red;
}
button {
font-size: 0.7rem;
text-transform: uppercase;
padding: 10px 30px;
border: 1px solid #C5A059;
background: #E5E4E2;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background: #222;
color: white;
}
main {
position: relative;
background: linear-gradient(rgba(255, 255, 255, 0.1) 30%, rgba(0, 0, 0, 1) 100%), url("https://images.unsplash.com/photo-1598634222670-87c5f558119c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
background-size: cover;
background-position: bottom center;
height: 600px;
color: white;
}
main header {
padding: 0 10%;
text-transform: uppercase;
line-height: 5rem;
display: flex;
justify-content: space-between;
}
main header div {
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
transition: 0.8s;
}
main header div:hover,
main header nav:hover {
color: #777;
}
main header nav {
font-size: 3rem;
cursor: pointer;
transition: 0.8s;
}
main>div {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -70%);
}
main div p {
padding: 16px;
margin: 20px auto;
font-size: 1.4rem;
}
.power-text {
padding: 150px 10%;
text-align: center;
}
.vertical-line {
width: 3px;
height: 100px;
background: #707072;
margin: 150px auto 40px;
}
.power {
background: url("https://cdn.pixabay.com/photo/2016/07/13/11/55/spray-1514264_1280.jpg") no-repeat;
background-size: cover;
background-position: center right;
height: 500px;
color: white;
display: flex;
flex-direction: row-reverse;
}
.power div {
background: rgba(0, 0, 0, 0.5);
width: 50%;
height: 100%;
padding: 80px 5%;
}
.power div h2 {
text-align: left;
}
.power>div>p:nth-of-type(1) {
margin: 32px 0;
}
.power>div>p:nth-of-type(2) {
display: none;
margin: 32px 0 0;
}
.house-text {
padding: 150px 10% 50px;
line-height: 20px;
text-align: center;
}
.house-text p {
margin: 70px auto;
}
.house section {
height: 500px;
color: white;
text-align: center;
}
.house> :nth-child(1) {
background: url("https://images.unsplash.com/photo-1519669011783-4eaa95fa1b7d?q=80&w=1958&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
background-size: cover;
background-position: center center;
}
.house> :nth-child(2) {
position: relative;
background: url("https://images.unsplash.com/photo-1700473209752-395910c89003?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
background-size: cover;
background-position: center center;
}
.house .video-hover-box {
position: relative;
overflow: hidden;
background: url("https://images.unsplash.com/photo-1700473209752-395910c89003?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat center center / cover;
}
.house .video-hover-box video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.5s ease;
z-index: 1;
pointer-events: none;
}
.house .video-hover-box:hover video {
opacity: 1;
}
.house .video-hover-box:hover .content {
background: rgba(0, 0, 0, 0.7);
}
.house> :nth-child(3) {
background: linear-gradient(rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 1) 100%), url("https://images.unsplash.com/photo-1519761192872-d8496d4ccaaf?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
background-size: cover;
background-position: center center;
}
.house .video-hover-box .content,
.house section div {
position: relative;
z-index: 2;
/* background: rgba(0, 0, 0, 0.2); */
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 80px 25%;
cursor: pointer;
transition: 0.8s;
}
.house section div:hover {
background: rgba(0, 0, 0, 0.4);
}
.house section div button {
background: rgba(255, 255, 255, 0.5);
color: white;
}
.our-text {
padding: 150px 10%;
text-align: center;
}
.our-text p {
margin: 60px auto 0;
}
.our section {
height: 140PX;
}
.our> :nth-child(1) {
background: url(https://images.unsplash.com/photo-1602070945737-067cfd04174c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat;
background-size: cover;
background-position: center center;
}
.our> :nth-child(2) {
background: url("https://plus.unsplash.com/premium_photo-1670574873484-bf0923c33a24?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
background-size: cover;
background-position: center center;
}
.our> :nth-child(3) {
background: url(https://plus.unsplash.com/premium_photo-1739831741008-6213d7f8c17e?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat;
background-size: cover;
background-position: center center;
}
.our> :nth-child(4) {
background: url(https://images.unsplash.com/photo-1629881604792-7313167e39f9?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat;
background-size: cover;
background-position: top center;
}
.our section div {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.5s;
}
.our section div:hover {
background: rgba(0, 0, 0, 0);
}
.our section div button {
width: 150px;
background: rgba(255, 255, 255, 0.2);
color: white;
transition: 0.5s;
}
.our section div button:hover {
width: 150px;
background: white;
color: black;
}
.partner {
position: relative;
padding: 90px 10%;
text-align: center;
}
.partner h2 {
margin: 10px auto 40px;
}
.partner p {
margin: 40px auto 0;
font-size: 1rem;
}
.partner :nth-child(2) img {
width: 70px;
margin: 10px 2%;
opacity: 0.5;
padding: 0 0 10px;
cursor: pointer;
transition: 0.5s;
filter: invert(1);
}
.partner :nth-child(2) img:hover {
opacity: 1;
}
.guides {
display: none;
}
.guides p {
text-align: center;
}
footer {
background: #222;
padding: 80px 10%;
text-align: center;
}
footer h2 {
color: #aaa;
}
footer p {
margin: 20px 0;
}
footer>div {
color: #ddd;
}
footer div form div {
padding: 8px 0;
display: flex;
flex-direction: column;
}
footer div form div input,
footer div form div textarea {
width: 240px;
padding: 10px;
background: transparent;
border: none;
border-bottom: 1px solid #555;
color: white;
margin: 0 auto;
}
footer div form div button {
width: 240px;
margin: 0 auto;
}
address {
background: #333;
padding: 80px 10%;
text-align: center;
color: #aaa;
}
address h2 {
font-size: 1.5rem;
}
.langs {
position: fixed;
background: white;
color: black;
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid silver;
bottom: 30px;
right: 30px;
text-align: center;
line-height: 3rem;
font-weight: bold;
cursor: pointer;
transition: 1s;
z-index: 3;
}
.langs:hover {
background: black;
color: white;
border: 1px solid silver;
}
/* 랩탑 시작점 */
@media screen and (min-width: 1366px) {
main {
height: 800px;
}
.power>div>p:nth-of-type(2) {
display: block;
margin: 32px 0;
}
.house {
display: flex;
}
.house section {
height: 600px;
width: 100%;
}
.our {
display: flex;
flex-wrap: wrap;
}
.our section {
width: 25%;
height: 400px;
}
.our section button {
font-size: 0.8rem;
}
.partner {
width: 1000px;
margin: 0 auto;
}
.partner :nth-child(4) img {
width: 80px;
}
.guides {
display: block;
padding: 80px 0;
}
.guides table {
width: 1000px;
margin: 30px auto;
border-collapse: collapse;
}
.guides table tr {
border-bottom: 1px solid #ddd;
}
.guides table td {
padding: 16px;
}
footer div {
width: 1000px;
margin: 0 auto;
}
address div {
width: 1000px;
margin: 0 auto;
}
}// 1. 한글/영어 사전 (Dictionary) 만들기
const langData = {
ko: {
mainDesc: "고요하지만 강력한 흔적",
mainBtn: "자세히 보기",
powerTitle1: "THE ULTIMATE MANLINESS",
powerTitle2: "POWER IN SILENCE",
powerDesc1: "MUTE는 단순히 향기를 파는 것이 아니라, 당신의 존재감을 증명하는 보이지 않는 수트를 제안합니다.<br>",
powerDesc2: "고요함 속에 잠재된 폭발적인 에너지를 경험하세요. 한 번의 분사로 세상을 당신의 향기로 채우세요.<br>",
powerBtn: "브랜드 가이드",
houseTitle: "CURATED FRAGRANCE HOUSE",
houseDesc: "당신을 위한 프리미엄 향기 큐레이션<br />전 세계에서 엄선된 니치 향수부터 트렌디한 브랜드까지, 당신의 분위기에 맞는 최적의 향을 제안합니다.",
discoverBtn: "보러가기",
ourTitle: "OUR SIGNATURE SERVICES",
ourDesc: "오직 뮤트에서만 경험할 수 있는 특별함<br>단순한 향수 구매를 넘어, 당신의 삶에 깊게 스며들 수 있는 특별한 가치를 제안합니다. <br>전문가의 섬세한 터치로 완성되는 퍼스널 조향부터 전 세계 유수의 니치 향수를 직접 경험할 수 있는 오프라인 스토어까지, 오직 뮤트(MUTE)에서만 허락된 감도 높은 프리미엄 서비스를 지금 바로 확인해 보세요.",
ourBtn1: "테마별 큐레이션",
ourBtn2: "퍼스널 향수",
ourBtn3: "디스커버리 키트",
ourBtn4: "매장 안내",
partnerTitle: "PARTNER BRANDS",
partnerDesc: "함께하는 프리미엄 파트너",
guidesTitle: "향의 깊이 가이드",
guidesSub: "지속시간에 따른 향수의 종류 알아보기",
th1: "등급",
th2: "부향률",
th3: "지속 시간",
th4: "특징",
td1_1: "퍼퓸",
td1_2: "7 ~ 8시간 이상",
td1_3: "가장 깊고 풍부한 향, 특별한 날 추천",
td2_1: "오드 퍼퓸",
td2_2: "5시간 전후",
td2_3: "대중적이며 선명한 발향, 데일리용",
td3_1: "오드 뚜왈렛",
td3_2: "3 ~ 4시간 전후",
td3_3: "가볍고 부드러운 느낌, 캐주얼한 사용",
footerDesc: "비회원 주문 조회 및 배송 현황",
footerName: "이름",
footerOrderNum: "주문번호",
footerPw: "구매 비밀번호",
footerBtn: "조회",
addressTitle: "뮤트와 연결되는 공간",
addressDesc: "서울특별시 강남구 테헤란로 123, 뮤트 빌딩 15층<br>TEL: 02-1234-5678<br>EMAIL: info@mute.com"
},
en: {
mainDesc: "A silent but powerful trace",
mainBtn: "LEARN MORE",
powerTitle1: "THE ULTIMATE MANLINESS",
powerTitle2: "POWER IN SILENCE",
powerDesc1: "MUTE doesn't just sell scents; we propose an invisible suit that proves your presence.<br>",
powerDesc2: "Experience the explosive energy dormant in the silence. Fill the world with your scent with a single spray.<br>",
powerBtn: "BRAND GUIDE",
houseTitle: "CURATED FRAGRANCE HOUSE",
houseDesc: "Premium fragrance curation for you.<br />From globally selected niche perfumes to trendy brands, we suggest the optimal scent for your vibe.",
discoverBtn: "DISCOVER",
ourTitle: "OUR SIGNATURE SERVICES",
ourDesc: "Exclusivity only at MUTE.<br>Beyond a simple purchase, we offer special values that permeate deep into your life. <br>From personal blending finished by expert touches to offline stores where you can experience leading niche perfumes, discover premium services only at MUTE.",
ourBtn1: "CURATED COLLECTIONS",
ourBtn2: "PERSONAL PERFUME",
ourBtn3: "DISCOVERY KIT",
ourBtn4: "STORE LOCATION",
partnerTitle: "PARTNER BRANDS",
partnerDesc: "Premium Partnership",
guidesTitle: "Fragrance Intensity Guide",
guidesSub: "Learn about perfume types based on duration",
th1: "Type",
th2: "Conc.",
th3: "Duration",
th4: "Features",
td1_1: "Parfum",
td1_2: "Over 7~8 hrs",
td1_3: "Rich scent, recommended for special days",
td2_1: "Eau de Parfum",
td2_2: "Around 5 hrs",
td2_3: "Popular and clear scent, for daily use",
td3_1: "Eau de Toilette",
td3_2: "Around 3~4 hrs",
td3_3: "Light and soft, for casual use",
footerDesc: "Non-member order tracking and shipping status",
footerName: "Name",
footerOrderNum: "Order No.",
footerPw: "Password",
footerBtn: "TRACK",
addressTitle: "STAY IN MUTE",
addressDesc: "15F, MUTE Bldg, 123 Teheran-ro, Gangnam-gu, Seoul, Korea<br>TEL: +82-2-1234-5678<br>EMAIL: info@mute.com"
}
};
$(document).ready(function() {
/* 기본언어 한글 */
let currentLang = 'ko';
$('#lang-btn').click(function() {
currentLang = currentLang === 'ko' ? 'en' : 'ko';
$(this).text(currentLang === 'ko' ? 'EN' : 'KO');
$('[data-key]').each(function() {
let key = $(this).attr('data-key');
if (langData[currentLang][key]) {
$(this).html(langData[currentLang][key]);
}
});
});
});
