gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

작업 중

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-09-28 23:06:15 +09:00
parent 51a6da2f71
commit d65206a8d5
43 changed files with 1954 additions and 669 deletions
Download Patch File Download Diff File Expand all files Collapse all files

512
kr/promotion/disney_promotion.html
View File

@@ -356,8 +356,11 @@
<div class="promotionHeader">
<div class="promotionHeaderInner">
<div class="pageTitle">
<h1>Hello, Disney!</h1>
<p>Disney and Kia brings imagination, color and emotion to your screen</p>
<h1>Inspired Together</h1>
<p>
Disney and Kia bring<br class="br-m" />
imagination, color and emotion to your screen.
</p>
</div>
</div>
</div>
@@ -370,13 +373,13 @@
<a href="#overview" class="tabLink">Overview</a>
</li>
<li class="tabItem">
<a href="#available-cars" class="tabLink">Available Cars</a>
<a href="#availableCars" class="tabLink">Available Cars</a>
</li>
<li class="tabItem">
<a href="#select-guide" class="tabLink">Select Guide</a>
<a href="#themeSelectGuide" class="tabLink">Select Guide</a>
</li>
<li class="tabItem">
<a href="#more-features" class="tabLink">More Features</a>
<a href="#moreFeatures" class="tabLink">More Features</a>
</li>
<li class="tabItem">
<a href="#information" class="tabLink">Information</a>
@@ -389,15 +392,17 @@
<div class="tabContentArea">
<div class="tabContentInner">
<!-- Overview 탭 -->
<div id="overview" class="tabContent active">
<div id="overview" class="tabContent overview active">
<div class="contentSection">
<div class="contentSectionInner">
<h2>Disney Display Themes</h2>
<p>
Where innovation meets timeless storytelling.<br /><br />
Kia and The Walt Disney Company present stunning display themes - each a canvas of imagination and story, infused with the innovation of Kia. <br />
From your morning commute to weekend escapes, every drive becomes an unforgettable chapter.
</p>
<div class="title-area">
<h2>New Display Themes</h2>
<p>
Where innovation meets timeless storytelling.<br /><br />
Kia and The Walt Disney Company present stunning display themes - each a canvas of imagination and story, infused with the innovation of Kia. <br />
From your morning commute to weekend escapes, every drive becomes an unforgettable chapter.
</p>
</div>
</div>
<!-- Disney 테마 스와이퍼 -->
<div class="disneySwiperContainer">
@@ -406,28 +411,28 @@
<div class="swiper-slide">
<div class="themeCard frozen">
<div class="themeIcon">
<img src="../assets/images/kia/promotion/img_feature01.png" alt="Frozen Theme" />
<img src="../assets/images/kia/promotion/img_overview01.png" alt="Frozen Theme" />
</div>
</div>
</div>
<div class="swiper-slide">
<div class="themeCard mickey">
<div class="themeIcon">
<img src="../assets/images/kia/promotion/img_feature02.png" alt="Mickey Mouse Theme" />
<img src="../assets/images/kia/promotion/img_overview02.png" alt="Mickey Mouse Theme" />
</div>
</div>
</div>
<div class="swiper-slide">
<div class="themeCard toyStory">
<div class="themeIcon">
<img src="../assets/images/kia/promotion/img_feature03.png" alt="Toy Story Theme" />
<img src="../assets/images/kia/promotion/img_overview03.png" alt="Toy Story Theme" />
</div>
</div>
</div>
<div class="swiper-slide">
<div class="themeCard moana">
<div class="themeIcon">
<img src="../assets/images/kia/promotion/img_feature04.png" alt="Moana Theme" />
<img src="../assets/images/kia/promotion/img_overview04.png" alt="Moana Theme" />
</div>
</div>
</div>
@@ -438,123 +443,342 @@
</div>
<!-- Available Cars 탭 -->
<div id="available-cars" class="tabContent">
<div id="availableCars" class="tabContent available-cars">
<div class="contentSection">
<div class="contentSectionInner">
<h2>Available Cars</h2>
<p>Introducing cars that are available with Disney Display Themes. Look forward to more updates!</p>
<div class="title-area">
<h3>Available Cars</h3>
<p>Introducing cars that are available with Disney Display Themes for purchase. Look forward to more updates in the future!</p>
</div>
<!-- 차량 목록 -->
<div class="carList">
<img src="../assets/images/kia/promotion/img_available_cars.png" alt="Available Cars" />
</div>
<!-- 차량 목록 -->
<div class="carList">
<img src="../assets/images/kia/promotion/img_available_cars_m.png" class="img-m" alt="Available Cars" />
<img src="../assets/images/kia/promotion/img_available_cars.png" class="img-pc" alt="Available Cars" />
</div>
<!-- Notice 박스 -->
<div class="noticeBox">
<h3>Notice</h3>
<ul>
<li>It can be purchased only for users of the Kia Connect service.</li>
<li>It is only available for vehicles with a 12.3-inch cluster among the ccNC infotainment platforms.</li>
<li>Purchase availability can be found on the detailed page of each product.</li>
</ul>
</div>
<!-- Notice 박스 -->
<div class="noticeBox">
<h4>Notice</h4>
<ul>
<li>It can be purchased only for users of the Kia Connect service.</li>
<li>It is only available for vehicles with a 12.3-inch cluster among the ccNC infotainment platforms.</li>
<li>Purchase availability can be found on the detailed page of each product.</li>
</ul>
</div>
</div>
</div>
<!-- Select Guide 탭 -->
<div id="select-guide" class="tabContent">
<div id="themeSelectGuide" class="tabContent theme-select-guide">
<div class="contentSection">
<h2>선택 가이드</h2>
<p>Disney 디스플레이 테마를 선택하고 설치하는 방법을 안내해드립니다.</p>
<div class="guideSteps">
<div class="stepItem">
<div class="stepNumber">1</div>
<div class="stepContent">
<h3>차량 확인</h3>
<p>귀하의 차량이 지원되는지 확인하세요.</p>
<div class="title-area">
<h3>Feel like you are driving into the Disney Universe</h3>
<h2>Theme Select Guide</h2>
<p>
From timeless classics to heroic adventures, discover a colorful lineup of Disney Display Themes. <br />
Explore them all, find your favorite, and make your ride feel more magical.
</p>
</div>
<div class="guides-wrap">
<!-- Start Disney 테마 -->
<div class="guides-section disney-theme">
<h4>Disney Display Themes</h4>
<div class="guides-header">
<div class="logo">
<img src="../assets/images/kia/promotion/logo_disney_white.png" alt="Disney" />
</div>
<div class="copyright">
<span>&copy; Disney</span>
</div>
<a href="#" class="btn-viewAll">
<span>View all</span>
<span class="arrow-icon"></span>
</a>
</div>
<div class="guides-content">
<div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/disney_mickey.png" class="img-pc" alt="Disney Mickey & Friends" />
<img src="../assets/images/kia/promotion/disney_mickey_m.png" class="img-m" alt="Disney Mickey & Friends" />
</span>
<strong>Disney Mickey & Friends</strong>
</div>
<div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/disney_frozen.png" class="img-pc" alt="Disney Frozen" />
<img src="../assets/images/kia/promotion/disney_frozen_m.png" class="img-m" alt="Disney Frozen" />
</span>
<strong>Disney Frozen</strong>
</div>
<div class="item stay-tuned-item">
<div class="stay-tuned">
<span></span>
<strong>STAY TUNED</strong>
</div>
</div>
</div>
</div>
<div class="stepItem">
<div class="stepNumber">2</div>
<div class="stepContent">
<h3>테마 선택</h3>
<p>원하는 Disney 테마를 선택하세요.</p>
<!-- End Disney 테마 -->
<!-- Start Pixar 테마 -->
<div class="guides-section disney-pixar-theme">
<h4>Disney Pixar Display Themes</h4>
<div class="guides-header">
<div class="logo">
<img src="../assets/images/kia/promotion/logo_disney_pixar.png" alt="Disney" />
</div>
<div class="copyright">
<span>&copy; Disney/Pixar</span>
</div>
<a href="#" class="btn-viewAll">
<span>View all</span>
<span class="arrow-icon"></span>
</a>
</div>
<div class="guides-content">
<div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/disney_pixar_toy.png" class="img-pc" alt="Pixar Toy Story" />
<img src="../assets/images/kia/promotion/disney_pixar_toy_m.png" class="img-m" alt="Pixar Toy Story" />
</span>
<strong>Pixar Toy Story</strong>
</div>
<div class="item stay-tuned-item">
<div class="stay-tuned">
<span></span>
<strong>STAY TUNED</strong>
</div>
</div>
</div>
</div>
<div class="stepItem">
<div class="stepNumber">3</div>
<div class="stepContent">
<h3>설치 및 활성화</h3>
<p>선택한 테마를 다운로드하고 활성화하세요.</p>
<!-- End Pixar 테마 -->
<!-- Start Marvel 테마 -->
<div class="guides-section marvel-theme">
<h4>Marvel Display Themes</h4>
<div class="guides-header">
<div class="logo">
<img src="../assets/images/kia/promotion/logo_marvel.png" alt="marvel" />
</div>
<div class="copyright">
<span>&copy; 2025 Marvel</span>
</div>
<a href="#" class="btn-viewAll">
<span>View all</span>
<span class="arrow-icon"></span>
</a>
</div>
<div class="guides-content">
<div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/marvel_logo1.png" class="img-pc" alt="Marvel’s Avengers Assemble" />
<img src="../assets/images/kia/promotion/marvel_logo1_m.png" class="img-m" alt="Marvel’s Avengers Assemble" />
</span>
<strong>Marvel’s Avengers Assemble</strong>
</div>
<div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/marvel_logo2.png" class="img-pc" alt="Marvel’s Avengers Comics" />
<img src="../assets/images/kia/promotion/marvel_logo2_m.png" class="img-m" alt="Marvel’s Avengers Comics" />
</span>
<strong>Marvel’s Avengers Comics</strong>
</div>
<div class="item stay-tuned-item">
<div class="stay-tuned">
<span></span>
<strong>STAY TUNED</strong>
</div>
</div>
</div>
</div>
<!-- End Marvel 테마 -->
<!-- Start Star Wars 테마 -->
<div class="guides-section starwars-theme">
<h4>Star Wars Display Themes</h4>
<div class="guides-header">
<div class="logo">
<img src="../assets/images/kia/promotion/logo_starwars.png" alt="Star Wars" />
</div>
<div class="copyright">
<span>&copy; Lucasfilm</span>
</div>
<!-- <a href="#" class="btn-viewAll">
<span>View all</span>
<span class="arrow-icon"></span>
</a> -->
</div>
<div class="guides-content">
<!-- <div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/disney_mickey.png" alt="Disney" />
</span>
<strong>Disney Mickey & Friends</strong>
</div>
<div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/disney_frozen.png" alt="Disney" />
</span>
<strong>Disney Frozen</strong>
</div> -->
<div class="item stay-tuned-item">
<div class="stay-tuned">
<span></span>
<strong>STAY TUNED</strong>
</div>
</div>
</div>
</div>
<!-- End Marvel 테마 -->
<!-- Start National Geographic 테마 -->
<div class="guides-section national-geographic-theme">
<h4>National Geographic Display Themes</h4>
<div class="guides-header">
<div class="logo">
<img src="../assets/images/kia/promotion/logo_national_gaeographic.png" alt="National Geographic" />
</div>
<div class="copyright">
<span>&copy; National Geographic</span>
</div>
<a href="#" class="btn-viewAll">
<span>View all</span>
<span class="arrow-icon"></span>
</a>
</div>
<div class="guides-content">
<div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/national_logo1.png" alt="National Geographic Baby Animals" />
</span>
<strong>National Geographic Baby Animals</strong>
</div>
<div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/national_logo2.png" alt="National Geographic Space Wonder" />
</span>
<strong>National Geographic Space Wonder</strong>
</div>
<div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/national_logo3.png" alt="National Geographic Landscapes" />
</span>
<strong>National Geographic Landscapes</strong>
</div>
<!-- <div class="item stay-tuned-item">
<div class="stay-tuned">
<span></span>
<strong>STAY TUNED</strong>
</div>
</div> -->
</div>
</div>
<!-- End National Geographic 테마 -->
</div>
</div>
</div>
<!-- More Features 탭 -->
<div id="more-features" class="tabContent">
<div id="moreFeatures" class="tabContent more-features">
<div class="contentSection">
<h2>추가 기능</h2>
<p>Disney 디스플레이 테마의 다양한 기능들을 확인해보세요.</p>
<div class="featuresList">
<div class="featureCard">
<h3>음성 인식</h3>
<p>"헤이 미키"라고 말하면 미키마우스가 응답합니다.</p>
<div class="title-area">
<h2>More Digital Features</h2>
<p>Check out more available digital features</p>
</div>
<div class="features-list">
<div class="swiper features-list-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="feature-card">
<div class="img">
<img src="../assets/images/kia/promotion/img_features01.jpg" alt="Features" />
</div>
<div class="txt">
<strong>Lighting Patterns</strong>
<p>₩ 180,000</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="feature-card">
<div class="img">
<img src="../assets/images/kia/promotion/img_features02.jpg" alt="Features" />
</div>
<div class="txt">
<strong>Lighting Patterns</strong>
<p>₩ 180,000</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="feature-card">
<div class="img">
<img src="../assets/images/kia/promotion/img_features03.jpg" alt="Features" />
</div>
<div class="txt">
<strong>Lighting Patterns</strong>
<p>₩ 180,000</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="feature-card">
<div class="img">
<img src="../assets/images/kia/promotion/img_features04.jpg" alt="Features" />
</div>
<div class="txt">
<strong>Lighting Patterns</strong>
<p>₩ 180,000</p>
</div>
</div>
</div>
</div>
</div>
<div class="featureCard">
<h3>날씨 연동</h3>
<p>날씨에 따라 캐릭터의 의상이 바뀝니다.</p>
</div>
<div class="featureCard">
<h3>시간대별 테마</h3>
<p>아침, 점심, 저녁에 맞는 테마가 자동으로 변경됩니다.</p>
</div>
<div class="featureCard">
<h3>특별 이벤트</h3>
<p>디즈니 영화 개봉 시 특별 테마가 제공됩니다.</p>
</div>
<div class="btn-area">
<div class="oneButton">
<a href="/kr/info/registration-guide"><p>Go to the list</p></a>
</div>
</div>
</div>
</div>
<!-- Information 탭 -->
<div id="information" class="tabContent">
<div id="information" class="tabContent information">
<div class="contentSection">
<h2>상세 정보</h2>
<div class="infoGrid">
<div class="infoSection">
<h3>가격 정보</h3>
<div class="title-area">
<h2>Information</h2>
</div>
<div class="info-section">
<!-- Target Models 섹션 -->
<div class="item">
<h3>Target models</h3>
<ul>
<li>기본 테마: 무료</li>
<li>프리미엄 테마: 월 9,900원</li>
<li>패밀리 패키지: 월 19,900원</li>
<li>EV5, EV3, EV4, EV6, Tasman, Sorento, Sportage, Carnival, K5, K8</li>
</ul>
</div>
<div class="infoSection">
<h3>시스템 요구사항</h3>
<!-- Available Period 섹션 -->
<div class="item">
<h3>Available Period</h3>
<ul>
<li>기아 커넥트 3.0 이상</li>
<li>최소 2GB 저장공간</li>
<li>인터넷 연결 필요</li>
<li>If you choose to use it for a lifetime, you can use it without a period limit. If you choose a monthly/annual subscription, you can use it for the specified period.</li>
</ul>
</div>
<div class="infoSection">
<h3>지원 언어</h3>
<!-- Legal Notice 섹션 -->
<div class="item">
<h3>Legal Notice</h3>
<ul>
<li>한국어</li>
<li>영어</li>
<li>일본어</li>
<li>중국어</li>
</ul>
</div>
<div class="infoSection">
<h3>업데이트</h3>
<ul>
<li>월 1회 새로운 테마 추가</li>
<li>자동 업데이트 지원</li>
<li>사용자 피드백 반영</li>
<li class="bu-none">© Disney © Disney/Pixar © 2025 MARVEL © Lucasfilm © National Geographic</li>
</ul>
</div>
</div>
@@ -778,7 +1002,7 @@
$(document).ready(function () {
// Disney 스와이퍼 초기화
var disneySwiper = new Swiper(".disneySwiper", {
slidesPerView: 2,
slidesPerView: 4.2,
spaceBetween: 24,
loop: true,
autoplay: {
@@ -795,37 +1019,115 @@
// },
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 20,
slidesPerView: 1,
spaceBetween: 0,
},
768: {
slidesPerView: 3,
spaceBetween: 30,
spaceBetween: 24,
},
1024: {
slidesPerView: 4,
spaceBetween: 30,
slidesPerView: 4.5,
spaceBetween: 24,
},
},
});
var disneyFeaturesSwiper = new Swiper(".features-list-swiper", {
slidesPerView: 2.15,
spaceBetween: 16,
loop: true,
autoplay: {
delay: 1500,
disableOnInteraction: false,
},
// pagination: {
// el: ".swiper-pagination",
// clickable: true,
// },
// navigation: {
// nextEl: ".swiper-button-next",
// prevEl: ".swiper-button-prev",
// },
breakpoints: {
768: {
slidesPerView: 3,
},
1024: {
slidesPerView: 4,
spaceBetween: 16,
},
},
});
// 탭 클릭 이벤트
$(".tabLink").on("click", function (e) {
e.preventDefault();
var targetTab = $(this).attr("href");
console.log("🚀 ~ 111 targetTab:", targetTab);
var $targetContent = $(targetTab);
var $clickedTab = $(this).parent();
// 모든 탭에서 active 클래스 제거
$(".tabItem").removeClass("active");
$(".tabContent").removeClass("active");
// 클릭한 탭에 active 클래스 추가
$(this).parent().addClass("active");
$clickedTab.addClass("active");
$targetContent.addClass("active");
// 탭 가로스크롤 중앙 정렬
var $tabNavigation = $(".tabNavigation");
var $tabList = $(".tabList");
var tabNavigationWidth = $tabNavigation.width();
// 탭 리스트의 실제 너비 계산 (여러 방법 시도)
var tabListWidth = $tabList[0].scrollWidth; // 스크롤 가능한 전체 너비
var tabListOffsetWidth = $tabList[0].offsetWidth; // 현재 보이는 너비
var tabListOuterWidth = $tabList.outerWidth(); // jQuery outerWidth
console.log("탭 네비게이션 너비:", tabNavigationWidth);
console.log("탭 리스트 scrollWidth:", tabListWidth);
console.log("탭 리스트 offsetWidth:", tabListOffsetWidth);
console.log("탭 리스트 outerWidth:", tabListOuterWidth);
// 탭 리스트가 네비게이션보다 넓을 때만 스크롤 조정
if (tabListWidth > tabNavigationWidth) {
// 탭의 절대 위치 계산 (부모 컨테이너 기준)
var tabOffsetLeft = $clickedTab.offset().left;
var tabNavigationOffsetLeft = $tabNavigation.offset().left;
var relativeTabOffset = tabOffsetLeft - tabNavigationOffsetLeft;
var tabWidth = $clickedTab.outerWidth();
var tabCenter = relativeTabOffset + tabWidth / 2;
var navigationCenter = tabNavigationWidth / 2;
var scrollLeft = tabCenter - navigationCenter;
// 스크롤 범위 제한
var maxScrollLeft = tabListWidth - tabNavigationWidth;
scrollLeft = Math.max(0, Math.min(scrollLeft, maxScrollLeft));
// 부드러운 스크롤 애니메이션
$tabNavigation.animate(
{
scrollLeft: scrollLeft,
},
300,
"easeInOutQuart"
);
// 대안 방법: scrollTo 사용
setTimeout(function () {
$tabNavigation[0].scrollTo({
left: scrollLeft,
behavior: "smooth",
});
}, 50);
}
// 해당 탭 콘텐츠로 스크롤 이동
if ($targetContent.length) {
var scrollTop = $targetContent.offset().top - 100; // 헤더 높이만큼 여백
var scrollTop = $targetContent.offset().top; // 헤더 높이만큼 여백
$("html, body").animate(
{
scrollTop: scrollTop,