msbfox/dnssash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit 2

Browse Source
This commit is contained in:
hmw1001
2026-06-11 18:47:38 +09:00
parent c768729ce6
commit 6f534e33a6
11095 changed files with 1595758 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme/rd.dnssash/rb.layout/dnssash_main/css/main.css
+212
View File
@@ -0,0 +1,212 @@
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
/* 공통 */
.main-container { width: 100%; overflow: hidden; }
.container { max-width: 1600px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
.section-title { text-align: center; margin-bottom: 50px; }
.section-title h3 { font-size: 32px; font-weight: 700; color: #333; margin-bottom: 15px; position: relative; display: inline-block; }
.section-title h3::after { content: ''; display: block; width: 40px; height: 2px; background: #0054a6; margin: 15px auto 0; }
.section-title p { font-size: 16px; color: #666; }
/* 1. 메인 비주얼 */
.main-visual {
width: 100%;
height: auto; /* 슬라이드 높이 증가 */
position: relative;
padding-top: 190px; /* 헤더 높이만큼 상단 여백 추가 */
box-sizing: border-box; /* 패딩을 높이에 포함 */
}
.visual-slider, .swiper-wrapper, .swiper-slide { height: 100%; }
.visual-link { display: block; width: 100%; height: 100%; position: relative; }
.visual-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 1; }
/* 텍스트 레이어 */
.visual-layer-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center; /* 수직 중앙 정렬 */
z-index: 2;
box-sizing: border-box;
text-align: center;
color: #fff;
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
.visual-title {
font-size: 48px;
font-weight: 700;
color: #ffd200;
margin: 0;
}
.visual-divider {
display: block;
width: 50px;
height: 2px;
background-color: rgba(255, 255, 255, 0.5);
margin: 30px auto;
}
.visual-subtitle {
font-size: 24px;
font-weight: 500;
line-height: 1.6;
margin: 0;
}
/* Swiper 네비게이션 버튼 스타일 */
.main-visual .swiper-button-next,
.main-visual .swiper-button-prev {
width: 70px;
height: 70px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 50%;
color: #fff;
transition: background-color 0.3s;
position: absolute; /* Swiper 기본 스타일 오버라이드 */
top: calc(50% + 45px); /* 90px(padding-top)의 절반만큼 아래로 이동 */
transform: translateY(-50%);
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.main-visual .swiper-button-prev {
left: 20px;
}
.main-visual .swiper-button-next {
right: 20px;
}
.main-visual .swiper-button-next:hover,
.main-visual .swiper-button-prev:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.main-visual .swiper-button-next:after,
.main-visual .swiper-button-prev:after {
font-size: 20px;
}
/* 썸네일 미리보기 스타일 */
.main-visual .swiper-button-prev .thumb-wrapper,
.main-visual .swiper-button-next .thumb-wrapper {
position: absolute;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transform: scale(0);
transition: all 0.3s ease;
pointer-events: none; /* 썸네일 위로 마우스가 올라가도 버튼 hover 상태 유지 */
}
.main-visual .swiper-button-prev:hover .thumb-wrapper,
.main-visual .swiper-button-next:hover .thumb-wrapper {
opacity: 1;
transform: scale(1);
}
.main-visual .swiper-button-prev .thumb-wrapper {
left: -110px; /* 버튼 왼쪽에 썸네일 표시 */
}
.main-visual .swiper-button-next .thumb-wrapper {
right: -110px; /* 버튼 오른쪽에 썸네일 표시 */
}
.main-visual .swiper-button-prev .thumb,
.main-visual .swiper-button-next .thumb {
width: 100px; /* 썸네일 크기 */
height: 100px;
background-size: cover;
background-position: center;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
border: 2px solid rgba(255, 255, 255, 0.8);
}
.main-visual .swiper-button-prev .thumb {
left: 0;
}
.main-visual .swiper-button-next .thumb {
right: 0;
}
/* 기본 초기화 및 폰트 */
/* 폰트 및 초기화 */
#eklim_main_wrap { font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif; letter-spacing: -0.05em; line-height: 1.2; }
/* 상단 유틸 (기획안 우측 상단 소형 글자) */
.top_util_bar { background: #fff; border-bottom: 1px solid #f0f0f0; }
.top_util_bar .inner { max-width: 1600px; margin: 0 auto; text-align: right; padding: 10px 20px; }
.top_util_bar a { font-size: 12px; color: #888; text-decoration: none; margin-left: 15px; }
/* [추가] 공정(Process) 섹션 및 레이아웃 그리드 스타일 */
.process-section {
padding: 60px 0;
background: #f8f9fa;
}
.layout-main-content1 {
width: 100%;
}
.layout-row {
display: flex;
flex-wrap: nowrap;
gap: 20px;
margin-bottom: 20px;
}
.layout-row:last-child {
margin-bottom: 0;
}
.layout-col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.layout-inner-row {
flex: 1;
min-height: 100px;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
padding: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.layout-inner-row:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
/* 애니메이션 */
.animate-in {
animation: fadeInUp 0.6s ease-out forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
theme/rd.dnssash/rb.layout/dnssash_main/css/products.css
+742
View File
@@ -0,0 +1,742 @@
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
/* 공통 */
.main-container { width: 100%; overflow: hidden; }
.container { max-width: 1600px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
.section-title { text-align: center; margin-bottom: 50px; }
.section-title h3 { font-size: 32px; font-weight: 700; color: #333; margin-bottom: 15px; position: relative; display: inline-block; }
.section-title h3::after { content: ''; display: block; width: 40px; height: 2px; background: #0054a6; margin: 15px auto 0; }
.section-title p { font-size: 16px; color: #666; }
/* 1. 메인 비주얼 */
.main-visual {
width: 100%;
height: auto; /* 슬라이드 높이 증가 */
position: relative;
padding-top: 190px; /* 헤더 높이만큼 상단 여백 추가 */
box-sizing: border-box; /* 패딩을 높이에 포함 */
}
.visual-slider, .swiper-wrapper, .swiper-slide { height: 100%; }
.visual-link { display: block; width: 100%; height: 100%; position: relative; }
.visual-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 1; }
/* 텍스트 레이어 */
.visual-layer-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center; /* 수직 중앙 정렬 */
z-index: 2;
box-sizing: border-box;
text-align: center;
color: #fff;
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
.visual-title {
font-size: 48px;
font-weight: 700;
color: #ffd200;
margin: 0;
}
.visual-divider {
display: block;
width: 50px;
height: 2px;
background-color: rgba(255, 255, 255, 0.5);
margin: 30px auto;
}
.visual-subtitle {
font-size: 24px;
font-weight: 500;
line-height: 1.6;
margin: 0;
}
/* Swiper 네비게이션 버튼 스타일 */
.main-visual .swiper-button-next,
.main-visual .swiper-button-prev {
width: 70px;
height: 70px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 50%;
color: #fff;
transition: background-color 0.3s;
position: absolute; /* Swiper 기본 스타일 오버라이드 */
top: calc(50% + 45px); /* 90px(padding-top)의 절반만큼 아래로 이동 */
transform: translateY(-50%);
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.main-visual .swiper-button-prev {
left: 20px;
}
.main-visual .swiper-button-next {
right: 20px;
}
.main-visual .swiper-button-next:hover,
.main-visual .swiper-button-prev:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.main-visual .swiper-button-next:after,
.main-visual .swiper-button-prev:after {
font-size: 20px;
}
/* 썸네일 미리보기 스타일 */
.main-visual .swiper-button-prev .thumb-wrapper,
.main-visual .swiper-button-next .thumb-wrapper {
position: absolute;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transform: scale(0);
transition: all 0.3s ease;
pointer-events: none; /* 썸네일 위로 마우스가 올라가도 버튼 hover 상태 유지 */
}
.main-visual .swiper-button-prev:hover .thumb-wrapper,
.main-visual .swiper-button-next:hover .thumb-wrapper {
opacity: 1;
transform: scale(1);
}
.main-visual .swiper-button-prev .thumb-wrapper {
left: -110px; /* 버튼 왼쪽에 썸네일 표시 */
}
.main-visual .swiper-button-next .thumb-wrapper {
right: -110px; /* 버튼 오른쪽에 썸네일 표시 */
}
.main-visual .swiper-button-prev .thumb,
.main-visual .swiper-button-next .thumb {
width: 100px; /* 썸네일 크기 */
height: 100px;
background-size: cover;
background-position: center;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
border: 2px solid rgba(255, 255, 255, 0.8);
}
.main-visual .swiper-button-prev .thumb {
left: 0;
}
.main-visual .swiper-button-next .thumb {
right: 0;
}
/* 기본 초기화 및 폰트 */
/* 폰트 및 초기화 */
#eklim_main_wrap { font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif; letter-spacing: -0.05em; line-height: 1.2; }
/* 상단 유틸 (기획안 우측 상단 소형 글자) */
.top_util_bar { background: #fff; border-bottom: 1px solid #f0f0f0; }
.top_util_bar .inner { max-width: 1600px; margin: 0 auto; text-align: right; padding: 10px 20px; }
.top_util_bar a { font-size: 12px; color: #888; text-decoration: none; margin-left: 15px; }
.visual-slider, .swiper-wrapper, .swiper-slide { height: 100%; }
.visual-link { display: block; width: 100%; height: 100%; position: relative; }
.visual-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 1; }
/* 텍스트 레이어 */
.visual-layer-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center; /* 수직 중앙 정렬 */
z-index: 2;
box-sizing: border-box;
text-align: center;
color: #fff;
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
.visual-title {
font-size: 48px;
font-weight: 700;
color: #ffd200;
margin: 0;
}
.visual-divider {
display: block;
width: 50px;
height: 2px;
background-color: rgba(255, 255, 255, 0.5);
margin: 30px auto;
}
.visual-subtitle {
font-size: 24px;
font-weight: 500;
line-height: 1.6;
margin: 0;
}
/* Swiper 네비게이션 버튼 스타일 */
.main-visual .swiper-button-next,
.main-visual .swiper-button-prev {
width: 70px;
height: 70px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 50%;
color: #fff;
transition: background-color 0.3s;
position: absolute; /* Swiper 기본 스타일 오버라이드 */
top: calc(50% + 45px); /* 90px(padding-top)의 절반만큼 아래로 이동 */
transform: translateY(-50%);
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.main-visual .swiper-button-prev {
left: 20px;
}
.main-visual .swiper-button-next {
right: 20px;
}
.main-visual .swiper-button-next:hover,
.main-visual .swiper-button-prev:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.main-visual .swiper-button-next:after,
.main-visual .swiper-button-prev:after {
font-size: 20px;
}
/* 썸네일 미리보기 스타일 */
.main-visual .swiper-button-prev .thumb-wrapper,
.main-visual .swiper-button-next .thumb-wrapper {
position: absolute;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transform: scale(0);
transition: all 0.3s ease;
pointer-events: none; /* 썸네일 위로 마우스가 올라가도 버튼 hover 상태 유지 */
}
.main-visual .swiper-button-prev:hover .thumb-wrapper,
.main-visual .swiper-button-next:hover .thumb-wrapper {
opacity: 1;
transform: scale(1);
}
.main-visual .swiper-button-prev .thumb-wrapper {
left: -110px; /* 버튼 왼쪽에 썸네일 표시 */
}
.main-visual .swiper-button-next .thumb-wrapper {
right: -110px; /* 버튼 오른쪽에 썸네일 표시 */
}
.main-visual .swiper-button-prev .thumb,
.main-visual .swiper-button-next .thumb {
width: 100px; /* 썸네일 크기 */
height: 100px;
background-size: cover;
background-position: center;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
border: 2px solid rgba(255, 255, 255, 0.8);
}
.main-visual .swiper-button-prev .thumb {
left: 0;
}
.main-visual .swiper-button-next .thumb {
right: 0;
}
/* 제품 인덱스 맵 전용 메인 비주얼 스타일 (이름 변경됨) */
.map-main-visual {
width: 100%;
height: 840px;
position: relative;
padding-top: 90px;
box-sizing: border-box;
overflow: hidden;
}
.map-main-visual .swiper-wrapper,
.map-main-visual .swiper-slide { height: 100%; }
.map-visual-link { display: block; width: 100%; height: 100%; position: relative; }
.map-visual-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 1; }
/* 텍스트 레이어 */
.map-visual-layer-wrap {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
display: flex; justify-content: center; align-items: center;
z-index: 2; text-align: center; color: #fff;
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
.map-visual-title { font-size: 48px; font-weight: 700; color: #ffd200; margin: 0; }
.map-visual-divider { display: block; width: 50px; height: 2px; background-color: rgba(255, 255, 255, 0.5); margin: 30px auto; }
.map-visual-subtitle { font-size: 24px; font-weight: 500; line-height: 1.6; margin: 0; }
/* 네비게이션 버튼 & 썸네일 */
.map-main-visual .swiper-button-next,
.map-main-visual .swiper-button-prev {
width: 70px; height: 70px; background-color: rgba(0, 0, 0, 0.1);
border-radius: 50%; color: #fff; transition: background-color 0.3s;
position: absolute; top: calc(50% + 45px); transform: translateY(-50%);
z-index: 10; display: flex; justify-content: center; align-items: center; cursor: pointer;
}
.map-main-visual .swiper-button-prev { left: 20px; }
.map-main-visual .swiper-button-next { right: 20px; }
.map-main-visual .swiper-button-next:hover,
.map-main-visual .swiper-button-prev:hover { background-color: rgba(0, 0, 0, 0.5); }
.map-main-visual .swiper-button-next:after,
.map-main-visual .swiper-button-prev:after { font-size: 20px; }
.map-thumb-wrapper {
position: absolute; top: 0; width: 100%; height: 100%;
border-radius: 50%; overflow: hidden; opacity: 0;
transform: scale(0); transition: all 0.3s ease; pointer-events: none;
}
.map-main-visual .swiper-button-prev:hover .map-thumb-wrapper,
.map-main-visual .swiper-button-next:hover .map-thumb-wrapper { opacity: 1; transform: scale(1); }
.map-main-visual .swiper-button-prev .map-thumb-wrapper { left: -110px; }
.map-main-visual .swiper-button-next .map-thumb-wrapper { right: -110px; }
.map-thumb {
width: 100px; height: 100px; background-size: cover; background-position: center;
border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%);
border: 2px solid rgba(255, 255, 255, 0.8);
}
/* 💡 [수정] 히어로 섹션 스타일 */
.hero_container {
padding: 120px 0 80px 0;
background: #fff;
}
.hero_container .content_inner {
max-width: 1600px;
margin: 0 auto;
position: relative;
line-height: 0;
}
.hero_container .main_bg_img {
width: 100%;
height: auto;
display: block;
}
.hero_container .hero_content_wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hero_container .text_area {
position: relative;
width: 100%;
max-width: 1600px;
padding: 0 20px;
text-align: left;
color: #111;
line-height: 1.6;
z-index: 2;
}
.hero_container .floating_as_badge {
position: absolute;
top: 20px;
right: 20px;
background: #FF6B00;
color: #fff;
padding: 30px 40px;
border-radius: 25px;
text-align: center;
box-shadow: 0 15px 35px rgba(255, 107, 0, 0.3);
z-index: 3;
line-height: 1.4;
}
/* 💡 [끝] 히어로 섹션 스타일 */
/* 텍스트 크기 및 색상 */
.label_orange { color: #FF6B00; font-size: 16px; font-weight: 700; margin-bottom: 20px; }
.label_blue { color: #007bff; font-size: 16px; font-weight: 700; margin-bottom: 20px; }
.main_title { font-size: 52px; font-weight: 800; color: #111; margin-bottom: 30px; line-height: 1.2; }
.main_title .highlight_orange { color: #FF6B00; }
.main_title .highlight_blue { color: #007bff; }
.sub_description { font-size: 20px; color: #666; line-height: 1.6; margin-bottom: 60px; }
/* 버튼 스타일 (기획안과 동일한 색상 대비) */
.main_action_row { display: flex; gap: 20px; }
.btn_box { display: flex; align-items: center; width: 380px; padding: 35px 30px; border-radius: 20px; cursor: pointer; transition: all 0.3s; }
/* 버튼 1: 블랙 (온라인 주문) */
.btn_box.dark { background: #222; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.btn_box.dark strong { font-size: 24px; color: #fff; }
.btn_box.dark p { font-size: 15px; color: #aaa; margin-top: 5px; }
/* 버튼 2: 화이트 (전문가 부르기) */
/* 버튼 2: 기본 흰색 상태 */
.btn_box.white {
background: #fff;
border: 1px solid #e0e0e0;
color: #222;
transition: all 0.3s ease; /* 부드러운 전환 효과 */
}
.btn_box.white strong { font-size: 24px; color: #222; transition: all 0.3s; }
.btn_box.white p { font-size: 15px; color: #888; margin-top: 5px; transition: all 0.3s; }
/* 마우스 올렸을 때 (Hover) 파란색으로 변경 */
.btn_box.white:hover {
background: #007bff; /* 신뢰감을 주는 파란색 */
border-color: #007bff;
transform: translateY(-8px); /* 위로 살짝 올라가는 효과 */
box-shadow: 0 10px 25px rgba(0, 123, 255, 0.3); /* 파란색 그림자 */
}
/* 마우스 올렸을 때 내부 글자색을 흰색으로 변경 */
.btn_box.white:hover strong,
.btn_box.white:hover p {
color: #fff;
}
/* 마우스 올렸을 때 아이콘도 살짝 반응하도록 (선택사항) */
.btn_box.white:hover .btn_icon {
filter: brightness(1.5);
}
/* 오렌지 플로팅 배지 (Slide 01 우측 상단 디자인) */
.floating_as_badge p { font-size: 18px; margin-bottom: 5px; font-weight: 400; opacity: 0.9; }
.floating_as_badge strong { font-size: 28px; font-weight: 900; display: block; }
/* 하단 네비게이션 */
.bottom_nav { border-top: 1px solid #eee; margin-top: 50px; }
.bottom_nav ul { list-style: none; display: flex; gap: 40px; justify-content: center; padding: 25px 0; }
.bottom_nav li { font-size: 17px; font-weight: 600; color: #444; cursor: pointer; }
/* --- [유지] 기본 및 공통 설정 --- */
.products-main-page { background-color: #0b0f1a; font-family: 'Pretendard', sans-serif; margin: 0; padding: 0; }
.main-container { width: 100%; overflow: hidden; }
.container { max-width: 1600px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
.section-title { text-align: center; margin-bottom: 50px; }
.section-title h3 { font-size: 32px; font-weight: 700; color: #333; margin-bottom: 15px; position: relative; display: inline-block; }
.section-title h3::after { content: ''; display: block; width: 40px; height: 2px; background: #0054a6; margin: 15px auto 0; }
.section-title p { font-size: 16px; color: #666; }
/* --- [유지] 메인 비주얼 슬라이더 관련 (기존 소스) --- */
.main-visual { width: 100%; height: auto; position: relative; padding-top: 190px; box-sizing: border-box; }
.visual-slider, .swiper-wrapper, .swiper-slide { height: 100%; }
.visual-link { display: block; width: 100%; height: 100%; position: relative; }
.visual-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 1; }
.visual-layer-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 2; text-align: center; color: #fff; text-shadow: 2px 2px 8px rgba(0,0,0,0.5); }
.visual-title { font-size: 48px; font-weight: 700; color: #ffd200; margin: 0; }
.visual-divider { display: block; width: 50px; height: 2px; background-color: rgba(255, 255, 255, 0.5); margin: 30px auto; }
.visual-subtitle { font-size: 24px; font-weight: 500; line-height: 1.6; margin: 0; }
.main-visual .swiper-button-next, .main-visual .swiper-button-prev { width: 70px; height: 70px; background-color: rgba(0, 0, 0, 0.1); border-radius: 50%; color: #fff; position: absolute; top: calc(50% + 45px); transform: translateY(-50%); z-index: 10; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.main-visual .swiper-button-prev { left: 20px; }
.main-visual .swiper-button-next { right: 20px; }
/* --- [유지] 히어로 섹션 관련 (기존 소스) --- */
.hero_container { padding: 120px 0 80px 0; background: #fff; }
.hero_container .text_area { position: relative; width: 100%; max-width: 1600px; padding: 0 20px; text-align: left; color: #111; line-height: 1.6; z-index: 2; }
/* ... (기존의 btn_box, main_title 등 생략하지만 파일에는 유지하셔야 합니다) ... */
/* --- [중요/수정] 팝업창 및 맵 전용 설정 --- */
/* 1. 최상위 섹션 기준점 (팝업 중앙 배치를 위해 필수) */
/*.product-map-section {
position: relative !important;
}*/
.product-map-section {
position: relative !important; /* 💡 absolute인 팝업이 이 섹션을 기준으로 정렬됨 */
background-color: #0b0f1a;
width: 100%;
overflow: hidden; /* 팝업이 섹션을 넘칠 경우 대비 */
}
/* 2. 맵 및 핫스팟 보정 */
/*.map-wrapper {
position: relative; display: inline-block;
width: 1600px; overflow: hidden; border-radius: 24px;
margin: 0 auto; background: #161b26;
}*/
.map-wrapper {
position: relative; display: inline-block;
width: 1600px; overflow: hidden; border-radius: 24px;
margin: 0 auto; background: #161b26;
}
/*.map-container {
position: relative; width: 100%; height: 980px !important;
background-size: 100% 100% !important; cursor: crosshair;
}*/
.map-container {
position: relative; width: 100%; height: 980px !important;
background-size: 100% 100% !important; cursor: crosshair;
}
/*.hotspot {
position: absolute; width: 22px !important; height: 22px !important;
background: rgba(59, 130, 246, 0.6); border: 2px solid #fff; border-radius: 50%;
transform: translate(-50%, -50%) !important; !* 💡 Y축 오차 해결 *!
z-index: 10; cursor: pointer;
}*/
/*
.hotspot {
position: absolute; width: 22px !important; height: 22px !important;
background: rgba(59, 130, 246, 0.6); border: 2px solid #fff; border-radius: 50%;
transform: translate(-50%, -50%) !important; z-index: 10; cursor: pointer;
}
.hotspot::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-color: rgba(0, 123, 255, 0.4); border-radius: 50%; transform: translate(-50%, -50%); animation: hotspot-pulse 2s infinite; }
@keyframes hotspot-pulse { 0% { width: 20px; height: 20px; opacity: 0.8; } 100% { width: 60px; height: 60px; opacity: 0; } }
*/
/* 1. 핫스팟 기본 스타일 (파란색) */
.hotspot {
position: absolute;
width: 22px !important;
height: 22px !important;
background: rgba(59, 130, 246, 0.8) !important; /* 파란색 */
border: 2px solid #fff;
border-radius: 50%;
transform: translate(-50%, -50%) !important;
z-index: 10;
cursor: pointer;
transition: all 0.3s ease; /* 부드러운 색상 전환 */
}
/* 💡 [추가] 마우스 올렸을 때 스타일 (노란색) */
.hotspot:hover {
background: rgba(255, 210, 0, 1) !important; /* 노란색으로 변경 */
box-shadow: 0 0 20px rgba(255, 210, 0, 0.8);
transform: translate(-50%, -50%) scale(1.2) !important; /* 살짝 커지는 효과 */
}
/* 2. 반짝이는 파동 효과 */
.hotspot::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 100%; height: 100%;
background-color: rgba(59, 130, 246, 0.4); /* 기본 파란색 파동 */
border-radius: 50%;
transform: translate(-50%, -50%);
animation: hotspot-pulse 2s infinite;
transition: background-color 0.3s ease;
}
/* 💡 [추가] 마우스 올렸을 때 파동 색상도 노란색으로 변경 */
.hotspot:hover::after {
background-color: rgba(255, 210, 0, 0.4) !important;
}
/* 파동 애니메이션 정의 */
@keyframes hotspot-pulse {
0% { width: 20px; height: 20px; opacity: 0.8; }
100% { width: 60px; height: 60px; opacity: 0; }
}
/* 3. [최종] 팝업 통합 스타일 (중복 완전 제거) */
/*#hover-preview {
position: absolute !important; !* 💡 섹션 내 중앙 배치 *!
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
display: none;
z-index: 1000;
background: rgba(15, 23, 42, 0.98) !important;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 24px;
padding: 30px !important;
box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.9);
!* 💡 사방 20px 마진 강제 *!
max-width: calc(100% - 40px) !important;
max-height: calc(100% - 40px) !important;
width: 500px; !* 호버 시 기본 너비 *!
transition: width 0.3s ease;
pointer-events: none;
}*/
#hover-preview {
position: absolute !important; /* 💡 fixed 사용 금지: 섹션 내부에서만 움직임 */
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important; /* 💡 정확히 섹션의 중앙 배치 */
display: none;
z-index: 1000;
background: rgba(15, 23, 42, 0.98) !important;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 24px;
padding: 30px !important;
box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.9);
/* 💡 부모 섹션 기준 사방 20px 마진 유지 */
max-width: calc(100% - 40px) !important;
max-height: calc(100% - 40px) !important;
width: calc(50% - 40px) !important;
height: calc(100% - 40px) !important;
transition: width 0.3s ease;
pointer-events: none;
}
/* 클릭 고정 시 */
/*#hover-preview.fixed-mode {
display: flex !important;
flex-direction: column !important; !* 💡 세로 배치를 강제하여 옆으로 벌어짐 해결 *!
width: calc(100% - 40px) !important;
height: calc(100% - 40px) !important;
pointer-events: auto !important;
}*/
#hover-preview.fixed-mode {
display: flex !important;
flex-direction: column !important; /* 💡 세로 배치를 강제하여 옆으로 벌어짐 해결 */
width: calc(50% - 40px) !important;
height: calc(100% - 40px) !important;
pointer-events: auto !important;
}
/* 4. 제품 그리드 및 아이템 레이아웃 */
/*.products-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px;
flex: 1;
overflow-y: auto;
width: 100%;
}*/
.products-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px; flex: 1; overflow-y: auto; width: 100%;
height: 100%;
}
/*.products-grid.single-item, .products-grid.full-html-mode {
grid-template-columns: 1fr !important;
}*/
.products-grid.single-item, .products-grid.full-html-mode {
grid-template-columns: 1fr !important;
}
/* 모든 아이템은 세로 정렬 */
/*.product-item.item-vertical {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
background: rgba(255, 255, 255, 0.05) !important;
padding: 20px;
border-radius: 16px;
color: #fff;
text-align: left !important;
}*/
.product-item.item-vertical {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
background: rgba(255, 255, 255, 0.05) !important;
padding: 20px; border-radius: 16px; color: #fff; text-align: left !important;
}
.product-img-box { width: 100% !important; height: 100% !important; background: #000; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.product-img-box img { max-width: 100% !important;
width: auto !important;
height: 100% !important;
display: block; margin: 15px auto; border-radius: 10px; }
/* 5. 에디터 뷰 최적화 */
.editor-content-view { width: 100% !important; height: 100% !important; color: #eee !important; line-height: 1.7; margin-bottom: 20px; }
/*.editor-content-view img { max-width: 100% !important; width: auto !important; height: auto !important; display: block; margin: 15px auto; border-radius: 10px; }*/
.editor-content-view img,
.editor-content-view p img {
max-width: 100% !important;
width: auto !important;
height: 100% !important;
display: block; margin: 15px auto; border-radius: 10px;
}
/* 스크롤바 디자인 */
#preview-grid::-webkit-scrollbar { width: 6px; }
#preview-grid::-webkit-scrollbar-thumb { background: rgba(59, 130, 246, 0.5); border-radius: 10px; }
.content-divider { border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin: 30px 0; }
/* 💡 [수정] 에디터 콘텐츠 뷰 내 이미지 스타일 통합 설정 */
/*
.editor-content-view img,
.editor-content-view p img {
!* 💡 가로 너비 설정 *!
max-width: 100% !important; !* 부모(팝업) 너비를 절대 넘지 않음 *!
width: auto !important; !* 원본 너비를 유지하되 부모보다 크면 축소 *!
!* 💡 세로 높이 설정 - 요청하신 100% 강제 적용 *!
height: 100% !important; !* 💡 부모 높이를 꽉 채우도록 강제 *!
!* 💡 비율 보정 (필수) *!
object-fit: contain !important; !* 100% 시 이미지가 찌그러지는 것을 방지하고 비율 유지하며 채움 *!
!* 💡 정렬 및 디자인 *!
display: block !important;
margin: 15px auto !important; !* 중앙 정렬 *!
border-radius: 10px !important;
}
!* 💡 [추가] 에디터 콘텐츠 뷰와 그 안의 p 태그에 높이 설정 *!
.editor-content-view {
!* 팝업의 고정된 높이(550px)에서 헤더(약 60px)와 패딩(30px)을 제외한 공간 *!
height: 380px !important; !* 💡 이미지의 부모 요소에 명확한 높이 부여 *!
overflow-y: auto !important; !* 내용이 길면 스크롤 *!
overflow-x: hidden !important;
padding-right: 10px !important; !* 스크롤바와 내용 사이 간격 *!
color: #eee !important;
font-size: 15px !important;
line-height: 1.7 !important;
width: 100% !important;
}
*/
.editor-content-view p {
height: 100% !important; /* 💡 img 태그의 부모인 p 태그도 높이를 100%로 설정 */
margin: 0 !important;
padding: 0 !important;
display: flex !important; /* p 태그 내부의 img를 정렬하기 위해 flex 사용 */
justify-content: center !important; /* 이미지를 p 태그 내에서 중앙 정렬 */
align-items: center !important; /* 이미지를 p 태그 내에서 중앙 정렬 */
}
theme/rd.dnssash/rb.layout/dnssash_main/css/products2.css
+91
View File
@@ -0,0 +1,91 @@
/* ============================================================
[최종 통합본] 메인 맵 전용 스타일 (products2.css)
============================================================ */
/* 1. 기본 레이아웃 및 컨테이너 */
.product-section { display: flex; justify-content: center; align-items: flex-start; gap: 40px; padding: 40px 20px; position: relative !important; }
.product-section .product-side { display: flex; flex-direction: column; }
.product-section .product-item { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; position: relative; z-index: 10; }
/* 2. 제품 이미지 기본 스타일 (200x200) */
.product-img { width: 200px; height: 200px; overflow: visible; position: relative; }
.product-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
/* 💡 [모드 1] 메인 영역 내부 중앙 팝업 */
#active-popup-img {
position: absolute !important;
top: 50% !important; left: 50% !important;
transform: translate(-50%, -50%) scale(0.1) !important;
width: calc(100% - 40px) !important;
height: auto !important;
max-height: 90% !important;
z-index: 9999 !important;
box-shadow: 0 40px 100px rgba(0,0,0,0.8);
border: 3px solid rgba(255,255,255,0.5);
object-fit: contain !important;
opacity: 0;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
pointer-events: none !important;
}
#active-popup-img.active { transform: translate(-50%, -50%) scale(1) !important; opacity: 1; }
/* 💡 [모드 2] 점선 연결선 + 화살표 */
.show-connector::after {
content: ''; position: absolute; top: 50%;
border-top: 3px dashed #ffd200; z-index: 500; pointer-events: none;
width: 0 !important;
transform: rotate(var(--line-angle, 0deg)) !important;
transition: width 0.5s ease;
display: block !important;
}
.show-connector::before {
content: ''; position: absolute; top: 50%; width: 0; height: 0;
border-left: 12px solid #ffd200; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
z-index: 501; pointer-events: none; opacity: 0;
transform: rotate(var(--line-angle, 0deg)) translateX(var(--line-width, 0px)) translateY(-50%);
transition: opacity 0.3s ease 0.4s;
display: block !important;
}
.show-connector.active::after { width: var(--line-width, 0px) !important; animation: dash-move 1.5s linear infinite; }
.show-connector.active::before { opacity: 1; }
/* 방향별 회전축 보정 */
.product-side.left .show-connector::after, .product-side.left .show-connector::before { left: 100% !important; margin-left: 10px; transform-origin: left center !important; }
.product-side.right .show-connector::after, .product-side.right .show-connector::before { right: 100% !important; left: auto !important; margin-right: 10px; transform-origin: right center !important; }
/* 💡 [모드 3] 제자리 600x600 확대 스타일 */
.mode-self-zoom {
position: absolute !important;
z-index: 1000 !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) scale(3) !important; /* 200px -> 600px */
box-shadow: 0 40px 80px rgba(0,0,0,0.6) !important;
border: 3px solid rgba(255,255,255,0.5) !important;
border-radius: 12px !important;
pointer-events: none !important;
}
@keyframes dash-move { to { stroke-dashoffset: -20; } }
/* 3. 메인 이미지 및 블루 스폿 설정 */
.product-main { position: relative; width: 1000px; height: 800px; flex-shrink: 0; overflow: hidden; }
.product-main img { width: 100%; height: 100%; object-fit: cover; }
.product-hotspot {
position: absolute !important; width: 25px !important; height: 25px !important;
background: rgba(0, 123, 255, 0.8) !important; border: 3px solid #fff !important;
border-radius: 50% !important; transform: translate(-50%, -50%) !important;
z-index: 500; display: none; animation: hotspot-pulse-blue 1.5s infinite ease-in-out;
}
@keyframes hotspot-pulse-blue {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.8;
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
}
50% {
transform: translate(-50%, -50%) scale(1.3);
opacity: 1;
box-shadow: 0 0 20px 10px rgba(0, 116, 255, 0.4), 0 0 30px 5px rgba(255, 255, 255, 0.5);
}
}
theme/rd.dnssash/rb.layout/dnssash_main/css/products2_잘된다.css
+326
View File
@@ -0,0 +1,326 @@
/* ============================================================
[최종 통합본] 메인 맵 전용 스타일 - 화살표 및 방향 보정 포함
============================================================ */
/* 1. 기본 레이아웃 */
.product-section {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 40px;
padding: 40px 20px;
position: relative !important;
}
.product-section .product-side { display: flex; flex-direction: column; }
.product-section .product-item {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 40px;
position: relative;
z-index: 10;
}
/* 2. 제품 이미지 기본 스타일 */
.product-img { width: 200px; height: 200px; overflow: visible; position: relative; }
.product-img img {
width: 100%; height: 100%; object-fit: cover; border-radius: 12px;
transition: all 0.4s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
/* 💡 [모드 1] 메인 영역 내부 중앙 팝업 */
#active-popup-img {
position: absolute !important;
top: 50% !important; left: 50% !important;
transform: translate(-50%, -50%) scale(0.1) !important;
width: calc(100% - 40px) !important;
height: calc(100% - 40px) !important;
max-width: 1560px;
z-index: 9999 !important;
box-shadow: 0 40px 100px rgba(0,0,0,0.8);
border: 3px solid rgba(255,255,255,0.5);
object-fit: contain !important;
opacity: 0;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
pointer-events: none !important;
}
#active-popup-img.active { transform: translate(-50%, -50%) scale(1) !important; opacity: 1; }
/* 💡 점선 연결선 설정 (After: 선, Before: 화살표) */
.show-connector::after {
content: ''; position: absolute; top: 50%;
border-top: 3px dashed #ffd200; z-index: 500; pointer-events: none;
width: 0 !important;
transform: rotate(var(--line-angle, 0deg)) !important;
transition: width 0.5s ease;
display: block !important;
}
/* 💡 [추가] 점선 끝 화살표 머리 */
.show-connector::before {
content: ''; position: absolute; top: 50%;
width: 0; height: 0;
border-left: 12px solid #ffd200; /* 화살표 색상 */
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
z-index: 501; pointer-events: none;
opacity: 0;
/* 선의 끝 지점으로 화살표 이동 */
transform: rotate(var(--line-angle, 0deg)) translateX(var(--line-width, 0px)) translateY(-50%);
transition: opacity 0.3s ease 0.4s;
display: block !important;
}
.show-connector.active::after { width: var(--line-width, 0px) !important; animation: dash-move 1.5s linear infinite; }
.show-connector.active::before { opacity: 1; }
/* 💡 방향별 회전축 보정 */
/* 왼쪽 메뉴 -> 메인으로 (오른쪽 방향) */
.product-side.left .show-connector::after,
.product-side.left .show-connector::before {
left: 100% !important;
margin-left: 10px;
transform-origin: left center !important;
}
/* 오른쪽 메뉴 -> 메인으로 (왼쪽 방향) */
.product-side.right .show-connector::after,
.product-side.right .show-connector::before {
right: 100% !important; /* 👈 오른쪽 끝 기준 왼쪽으로 뻗음 */
left: auto !important;
margin-right: 10px;
transform-origin: right center !important; /* 👈 회전축을 우측 끝으로 고정 */
}
@keyframes dash-move { to { stroke-dashoffset: -20; } }
/* 3. 메인 이미지 및 블루 스폿 설정 */
.product-main { position: relative; width: 1600px; height: 1200px; flex-shrink: 0; overflow: hidden; }
.product-main img { width: 100%; height: 100%; object-fit: cover; }
.product-hotspot {
position: absolute !important; width: 45px !important; height: 45px !important;
background: rgba(0, 123, 255, 0.8) !important; border: 3px solid #fff !important;
border-radius: 50% !important; transform: translate(-50%, -50%) !important;
z-index: 500; display: none; animation: hotspot-pulse-blue 1.5s infinite;
}
@keyframes hotspot-pulse-blue {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
50% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
}
/*잘되은거 아래*/
/*!* ============================================================
[최종 통합본] 메인 맵 전용 스타일 (products2.css)
============================================================ *!
!* 1. 기본 레이아웃 *!
.product-section {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 40px;
padding: 40px 20px;
position: relative !important;
}
.product-section .product-side { display: flex; flex-direction: column; }
.product-section .product-item {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 40px;
position: relative;
z-index: 10;
}
!* 2. 제품 이미지 기본 스타일 *!
.product-img {
width: 200px;
height: 200px;
overflow: visible;
position: relative;
}
.product-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
transition: all 0.4s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
!* 💡 [모드 1] 메인 영역 내부 중앙 팝업 *!
#active-popup-img {
position: absolute !important;
top: 50% !important;
left: 50% !important;
!* 시작 상태: 작고 투명하게 *!
transform: translate(-50%, -50%) scale(0.1) !important;
width: calc(100% - 40px) !important; !* 사방 20px 마진 *!
height: calc(100% - 40px) !important;
max-width: 1560px;
z-index: 9999 !important;
box-shadow: 0 40px 100px rgba(0,0,0,0.8);
border: 3px solid rgba(255,255,255,0.5);
object-fit: contain !important;
opacity: 0;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
!* 💡 [핵심] 마우스 이벤트를 무시하여 아이템 mouseleave 방해 금지 *!
pointer-events: none !important;
}
!* 활성화 상태: 정중앙 100% 크기 *!
#active-popup-img.active {
transform: translate(-50%, -50%) scale(1) !important;
opacity: 1;
}
!* 💡 [모드 2] 점선 연결선 *!
.show-connector::after {
content: '';
position: absolute;
top: 50%;
border-top: 3px dashed #ffd200;
z-index: 500;
pointer-events: none;
width: 0 !important; !* 시작은 길이 0 *!
transform: rotate(var(--line-angle, 0deg)) !important;
transform-origin: left center !important;
transition: width 0.5s ease;
display: block !important;
}
!* 활성화 상태: 계산된 길이만큼 뻗어나감 *!
.show-connector.active::after {
width: var(--line-width, 0px) !important;
animation: dash-move 1.5s linear infinite;
}
!* 방향별 연결선 시작 위치 *!
.product-side.left .show-connector::after { left: 100% !important; margin-left: 10px; }
.product-side.right .show-connector::after {
left: 0 !important;
margin-right: 10px;
transform-origin: right center !important;
}
@keyframes dash-move { to { stroke-dashoffset: -20; } }
!* 3. 메인 이미지 및 블루 스폿 설정 *!
.product-main {
position: relative;
width: 1600px;
height: 1200px;
flex-shrink: 0;
overflow: hidden;
}
.product-main img { width: 100%; height: 100%; object-fit: cover; }
.product-hotspot {
position: absolute !important;
width: 45px !important;
height: 45px !important;
background: rgba(0, 123, 255, 0.8) !important;
border: 3px solid #fff !important;
border-radius: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 500;
display: none;
animation: hotspot-pulse-blue 1.5s infinite;
}
@keyframes hotspot-pulse-blue {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
50% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
}
.product-hotspot::after {
content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
background-color: rgba(0, 123, 255, 0.3); border-radius: 50%;
transform: translate(-50%, -50%); animation: hotspot-ring 1.5s infinite;
}
@keyframes hotspot-ring {
0% { width: 45px; height: 45px; opacity: 0.5; }
100% { width: 120px; height: 120px; opacity: 0; }
}*/
/*
!* ============================================================
[최종 통합본] 메인 맵 전용 스타일 (products2.css)
============================================================ *!
!* 1. 컨테이너 및 레이아웃 *!
.product-section { display: flex; justify-content: center; align-items: flex-start; gap: 40px; padding: 40px 20px; }
.product-section .product-side { flex-direction: column; }
.product-section .product-item { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; position: relative; z-index: 10; }
!* 2. 제품 이미지 기본 스타일 *!
.product-img { width: 200px; height: 200px; overflow: visible; position: relative; }
.product-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; transition: all 0.4s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
!* 💡 [모드 1] 메인 영역(.product-main) 내부 중앙 팝업 *!
#active-popup-img {
position: absolute !important;
top: 50% !important; left: 50% !important;
transform: translate(-50%, -50%) !important;
width: calc(100% - 40px) !important; !* 💡 부모 내부 20px 마진 *!
height: calc(100% - 40px) !important;
max-width: 1560px;
z-index: 9999 !important;
box-shadow: 0 40px 100px rgba(0,0,0,0.8);
border: 3px solid rgba(255,255,255,0.5);
object-fit: contain !important;
pointer-events: none;
}
!* 💡 [모드 2] 점선 연결선 *!
.show-connector::after {
content: ''; position: absolute; top: 50%;
border-top: 3px dashed #ffd200; z-index: 500; pointer-events: none;
width: var(--line-width, 0px) !important;
transform: rotate(var(--line-angle, 0deg)) !important;
transform-origin: left center !important;
display: block !important;
}
.product-side.left .show-connector::after { left: 100% !important; margin-left: 10px; }
.product-side.right .show-connector::after { left: 0 !important; margin-right: 10px; transform-origin: right center !important; }
@keyframes dash-move { to { stroke-dashoffset: -20; } }
!* 3. 메인 이미지 및 블루 스폿 설정 *!
.product-main { position: relative; width: 1600px; height: 1200px; flex-shrink: 0; overflow: hidden; }
.product-main img { width: 100%; height: 100%; object-fit: cover; }
.product-hotspot {
position: absolute !important; width: 45px !important; height: 45px !important;
background: rgba(0, 123, 255, 0.8) !important; border: 3px solid #fff !important;
border-radius: 50% !important; transform: translate(-50%, -50%) !important;
z-index: 500; display: none; animation: hotspot-pulse-blue 1.5s infinite;
}
@keyframes hotspot-pulse-blue { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 50% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; } }
.product-hotspot::after {
content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
background-color: rgba(0, 123, 255, 0.3); border-radius: 50%;
transform: translate(-50%, -50%); animation: hotspot-ring 1.5s infinite;
}
@keyframes hotspot-ring { 0% { width: 45px; height: 45px; opacity: 0.5; } 100% { width: 120px; height: 120px; opacity: 0; } }
!* 💡 [모드 1] 메인 영역(.product-main) 내부 중앙 팝업 *!
#active-popup-img {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) scale(0.1) !important; !* 💡 초기 크기를 작게 시작 *!
width: calc(100% - 40px) !important; !* 메인 영역 너비의 90% *!
height: auto !important;
max-height: 90% !important;
z-index: 9999 !important;
box-shadow: 0 40px 100px rgba(0,0,0,0.8);
border: 3px solid rgba(255,255,255,0.5);
object-fit: contain !important;
pointer-events: none;
opacity: 0; !* 💡 초기 투명도 *!
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; !* 💡 애니메이션 추가 *!
}
!* 💡 [추가] 팝업이 활성화될 때 최종 크기로 *!
.product-section .product-main #active-popup-img.active {
transform: translate(-50%, -50%) scale(1) !important; !* 💡 최종 크기 *!
opacity: 1; !* 💡 최종 투명도 *!
}*/
theme/rd.dnssash/rb.layout/dnssash_main/css/products_ㅠㅁ차ㅕㅔ.css
+124
View File
@@ -0,0 +1,124 @@
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
/* --- [유지] 기본 및 공통 설정 --- */
.products-main-page { background-color: #0b0f1a; font-family: 'Pretendard', sans-serif; margin: 0; padding: 0; }
.main-container { width: 100%; overflow: hidden; }
.container { max-width: 1600px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
.section-title { text-align: center; margin-bottom: 50px; }
.section-title h3 { font-size: 32px; font-weight: 700; color: #333; margin-bottom: 15px; position: relative; display: inline-block; }
.section-title h3::after { content: ''; display: block; width: 40px; height: 2px; background: #0054a6; margin: 15px auto 0; }
.section-title p { font-size: 16px; color: #666; }
/* --- [유지] 메인 비주얼 슬라이더 관련 (기존 소스) --- */
.main-visual { width: 100%; height: auto; position: relative; padding-top: 190px; box-sizing: border-box; }
.visual-slider, .swiper-wrapper, .swiper-slide { height: 100%; }
.visual-link { display: block; width: 100%; height: 100%; position: relative; }
.visual-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 1; }
.visual-layer-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 2; text-align: center; color: #fff; text-shadow: 2px 2px 8px rgba(0,0,0,0.5); }
.visual-title { font-size: 48px; font-weight: 700; color: #ffd200; margin: 0; }
.visual-divider { display: block; width: 50px; height: 2px; background-color: rgba(255, 255, 255, 0.5); margin: 30px auto; }
.visual-subtitle { font-size: 24px; font-weight: 500; line-height: 1.6; margin: 0; }
.main-visual .swiper-button-next, .main-visual .swiper-button-prev { width: 70px; height: 70px; background-color: rgba(0, 0, 0, 0.1); border-radius: 50%; color: #fff; position: absolute; top: calc(50% + 45px); transform: translateY(-50%); z-index: 10; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.main-visual .swiper-button-prev { left: 20px; }
.main-visual .swiper-button-next { right: 20px; }
/* --- [유지] 히어로 섹션 관련 (기존 소스) --- */
.hero_container { padding: 120px 0 80px 0; background: #fff; }
.hero_container .text_area { position: relative; width: 100%; max-width: 1600px; padding: 0 20px; text-align: left; color: #111; line-height: 1.6; z-index: 2; }
/* ... (기존의 btn_box, main_title 등 생략하지만 파일에는 유지하셔야 합니다) ... */
/* --- [중요/수정] 팝업창 및 맵 전용 설정 --- */
/* 1. 최상위 섹션 기준점 (팝업 중앙 배치를 위해 필수) */
.product-map-section {
position: relative !important;
}
/* 2. 맵 및 핫스팟 보정 */
.map-wrapper {
position: relative; display: inline-block;
width: 1600px; overflow: hidden; border-radius: 24px;
margin: 0 auto; background: #161b26;
}
.map-container {
position: relative; width: 100%; height: 980px !important;
background-size: 100% 100% !important; cursor: crosshair;
}
.hotspot {
position: absolute; width: 22px !important; height: 22px !important;
background: rgba(59, 130, 246, 0.6); border: 2px solid #fff; border-radius: 50%;
transform: translate(-50%, -50%) !important; /* 💡 Y축 오차 해결 */
z-index: 10; cursor: pointer;
}
.hotspot::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-color: rgba(0, 123, 255, 0.4); border-radius: 50%; transform: translate(-50%, -50%); animation: hotspot-pulse 2s infinite; }
@keyframes hotspot-pulse { 0% { width: 20px; height: 20px; opacity: 0.8; } 100% { width: 60px; height: 60px; opacity: 0; } }
/* 3. [최종] 팝업 통합 스타일 (중복 완전 제거) */
#hover-preview {
position: absolute !important; /* 💡 섹션 내 중앙 배치 */
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
display: none;
z-index: 1000;
background: rgba(15, 23, 42, 0.98) !important;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 24px;
padding: 30px !important;
box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.9);
/* 💡 사방 20px 마진 강제 */
max-width: calc(100% - 40px) !important;
max-height: calc(100% - 40px) !important;
width: 500px; /* 호버 시 기본 너비 */
transition: width 0.3s ease;
pointer-events: none;
}
/* 클릭 고정 시 */
#hover-preview.fixed-mode {
display: flex !important;
flex-direction: column !important; /* 💡 세로 배치를 강제하여 옆으로 벌어짐 해결 */
width: calc(100% - 40px) !important;
height: calc(100% - 40px) !important;
pointer-events: auto !important;
}
/* 4. 제품 그리드 및 아이템 레이아웃 */
.products-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px;
flex: 1;
overflow-y: auto;
width: 100%;
}
.products-grid.single-item, .products-grid.full-html-mode {
grid-template-columns: 1fr !important;
}
/* 모든 아이템은 세로 정렬 */
.product-item.item-vertical {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
background: rgba(255, 255, 255, 0.05) !important;
padding: 20px;
border-radius: 16px;
color: #fff;
text-align: left !important;
}
.product-img-box { width: 100% !important; height: auto !important; max-height: 400px; background: #000; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.product-img-box img { width: 100%; height: 100%; object-fit: contain; }
/* 5. 에디터 뷰 최적화 */
.editor-content-view { width: 100% !important; color: #eee !important; line-height: 1.7; margin-bottom: 20px; }
.editor-content-view img { max-width: 100% !important; width: auto !important; height: auto !important; display: block; margin: 15px auto; border-radius: 10px; }
/* 스크롤바 디자인 */
#preview-grid::-webkit-scrollbar { width: 6px; }
#preview-grid::-webkit-scrollbar-thumb { background: rgba(59, 130, 246, 0.5); border-radius: 10px; }
.content-divider { border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin: 30px 0; }
theme/rd.dnssash/rb.layout/dnssash_main/css/style.css
+375
View File
@@ -0,0 +1,375 @@
/* 메인 레이아웃 스타일 */
/* 공통 */
.main-container { width: 100%; overflow: hidden; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
.section-title { text-align: center; margin-bottom: 50px; }
.section-title h3 { font-size: 32px; font-weight: 700; color: #333; margin-bottom: 15px; position: relative; display: inline-block; }
.section-title h3::after { content: ''; display: block; width: 40px; height: 2px; background: #0054a6; margin: 15px auto 0; }
.section-title p { font-size: 16px; color: #666; }
/* 1. 메인 비주얼 */
.main-visual {
width: 100%;
height: auto; /* 슬라이드 높이 증가 */
position: relative;
padding-top: 90px; /* 헤더 높이만큼 상단 여백 추가 */
box-sizing: border-box; /* 패딩을 높이에 포함 */
}
.visual-slider, .swiper-wrapper, .swiper-slide { height: 100%; }
.visual-link { display: block; width: 100%; height: 100%; position: relative; }
.visual-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 1; }
/* 텍스트 레이어 */
.visual-layer-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center; /* 수직 중앙 정렬 */
z-index: 2;
box-sizing: border-box;
text-align: center;
color: #fff;
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
.visual-title {
font-size: 48px;
font-weight: 700;
color: #ffd200;
margin: 0;
}
.visual-divider {
display: block;
width: 50px;
height: 2px;
background-color: rgba(255, 255, 255, 0.5);
margin: 30px auto;
}
.visual-subtitle {
font-size: 24px;
font-weight: 500;
line-height: 1.6;
margin: 0;
}
/* Swiper 네비게이션 버튼 스타일 */
.main-visual .swiper-button-next,
.main-visual .swiper-button-prev {
width: 70px;
height: 70px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 50%;
color: #fff;
transition: background-color 0.3s;
position: absolute; /* Swiper 기본 스타일 오버라이드 */
top: calc(50% + 45px); /* 90px(padding-top)의 절반만큼 아래로 이동 */
transform: translateY(-50%);
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.main-visual .swiper-button-prev {
left: 20px;
}
.main-visual .swiper-button-next {
right: 20px;
}
.main-visual .swiper-button-next:hover,
.main-visual .swiper-button-prev:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.main-visual .swiper-button-next:after,
.main-visual .swiper-button-prev:after {
font-size: 20px;
}
/* 썸네일 미리보기 스타일 */
.main-visual .swiper-button-prev .thumb-wrapper,
.main-visual .swiper-button-next .thumb-wrapper {
position: absolute;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transform: scale(0);
transition: all 0.3s ease;
pointer-events: none; /* 썸네일 위로 마우스가 올라가도 버튼 hover 상태 유지 */
}
.main-visual .swiper-button-prev:hover .thumb-wrapper,
.main-visual .swiper-button-next:hover .thumb-wrapper {
opacity: 1;
transform: scale(1);
}
.main-visual .swiper-button-prev .thumb-wrapper {
left: -110px; /* 버튼 왼쪽에 썸네일 표시 */
}
.main-visual .swiper-button-next .thumb-wrapper {
right: -110px; /* 버튼 오른쪽에 썸네일 표시 */
}
.main-visual .swiper-button-prev .thumb,
.main-visual .swiper-button-next .thumb {
width: 100px; /* 썸네일 크기 */
height: 100px;
background-size: cover;
background-position: center;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
border: 2px solid rgba(255, 255, 255, 0.8);
}
.main-visual .swiper-button-prev .thumb {
left: 0;
}
.main-visual .swiper-button-next .thumb {
right: 0;
}
/* 기본 초기화 및 폰트 */
/* 폰트 및 초기화 */
#eklim_main_wrap { font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif; letter-spacing: -0.05em; line-height: 1.2; }
/* 상단 유틸 (기획안 우측 상단 소형 글자) */
.top_util_bar { background: #fff; border-bottom: 1px solid #f0f0f0; }
.top_util_bar .inner { max-width: 1200px; margin: 0 auto; text-align: right; padding: 10px 20px; }
.top_util_bar a { font-size: 12px; color: #888; text-decoration: none; margin-left: 15px; }
/* 💡 [수정] 히어로 섹션 스타일 */
.hero_container {
padding: 120px 0 80px 0;
background: #fff;
}
.hero_container .content_inner {
max-width: 1600px;
margin: 0 auto;
position: relative;
line-height: 0;
}
.hero_container .main_bg_img {
width: 100%;
height: auto;
display: block;
}
.hero_container .hero_content_wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hero_container .text_area {
position: relative;
width: 100%;
max-width: 1200px;
padding: 0 20px;
text-align: left;
color: #111;
line-height: 1.6;
z-index: 2;
}
.hero_container .floating_as_badge {
position: absolute;
top: 20px;
right: 20px;
background: #FF6B00;
color: #fff;
padding: 30px 40px;
border-radius: 25px;
text-align: center;
box-shadow: 0 15px 35px rgba(255, 107, 0, 0.3);
z-index: 3;
line-height: 1.4;
}
/* 💡 [끝] 히어로 섹션 스타일 */
/* 텍스트 크기 및 색상 */
.label_orange { color: #FF6B00; font-size: 16px; font-weight: 700; margin-bottom: 20px; }
.label_blue { color: #007bff; font-size: 16px; font-weight: 700; margin-bottom: 20px; }
.main_title { font-size: 52px; font-weight: 800; color: #111; margin-bottom: 30px; line-height: 1.2; }
.main_title .highlight_orange { color: #FF6B00; }
.main_title .highlight_blue { color: #007bff; }
.sub_description { font-size: 20px; color: #666; line-height: 1.6; margin-bottom: 60px; }
/* 버튼 스타일 (기획안과 동일한 색상 대비) */
.main_action_row { display: flex; gap: 20px; }
.btn_box { display: flex; align-items: center; width: 380px; padding: 35px 30px; border-radius: 20px; cursor: pointer; transition: all 0.3s; }
/* 버튼 1: 블랙 (온라인 주문) */
.btn_box.dark { background: #222; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.btn_box.dark strong { font-size: 24px; color: #fff; }
.btn_box.dark p { font-size: 15px; color: #aaa; margin-top: 5px; }
/* 버튼 2: 화이트 (전문가 부르기) */
/* 버튼 2: 기본 흰색 상태 */
.btn_box.white {
background: #fff;
border: 1px solid #e0e0e0;
color: #222;
transition: all 0.3s ease; /* 부드러운 전환 효과 */
}
.btn_box.white strong { font-size: 24px; color: #222; transition: all 0.3s; }
.btn_box.white p { font-size: 15px; color: #888; margin-top: 5px; transition: all 0.3s; }
/* 마우스 올렸을 때 (Hover) 파란색으로 변경 */
.btn_box.white:hover {
background: #007bff; /* 신뢰감을 주는 파란색 */
border-color: #007bff;
transform: translateY(-8px); /* 위로 살짝 올라가는 효과 */
box-shadow: 0 10px 25px rgba(0, 123, 255, 0.3); /* 파란색 그림자 */
}
/* 마우스 올렸을 때 내부 글자색을 흰색으로 변경 */
.btn_box.white:hover strong,
.btn_box.white:hover p {
color: #fff;
}
/* 마우스 올렸을 때 아이콘도 살짝 반응하도록 (선택사항) */
.btn_box.white:hover .btn_icon {
filter: brightness(1.5);
}
/* 오렌지 플로팅 배지 (Slide 01 우측 상단 디자인) */
.floating_as_badge p { font-size: 18px; margin-bottom: 5px; font-weight: 400; opacity: 0.9; }
.floating_as_badge strong { font-size: 28px; font-weight: 900; display: block; }
/* 하단 네비게이션 */
.bottom_nav { border-top: 1px solid #eee; margin-top: 50px; }
.bottom_nav ul { list-style: none; display: flex; gap: 40px; justify-content: center; padding: 25px 0; }
.bottom_nav li { font-size: 17px; font-weight: 600; color: #444; cursor: pointer; }
/* 2. 제품 소개 */
.product-intro { padding: 80px 15px; }
.product-list { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.product-item { width: 23%; text-align: center; padding: 30px 20px; background: #f9f9f9; border-radius: 10px; transition: all 0.3s; text-decoration: none; color: #333; }
.product-item:hover { background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transform: translateY(-5px); }
.product-item .icon-box { width: 80px; height: 80px; margin: 0 auto 20px; }
.product-item .icon-box img { width: 100%; height: 100%; object-fit: contain; }
.product-item h4 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.product-item p { font-size: 14px; color: #888; }
/* 3. 회사 소개 */
.about-section { background: #f4f4f4; padding: 80px 0; }
.about-content { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.about-text { flex: 1; }
.about-text h3 { font-size: 18px; color: #0054a6; font-weight: 700; margin-bottom: 10px; }
.about-text h2 { font-size: 36px; font-weight: 700; margin-bottom: 30px; color: #333; }
.about-text p { font-size: 16px; line-height: 1.8; color: #555; margin-bottom: 40px; }
.about-text .btn-more { display: inline-block; padding: 12px 30px; background: #333; color: #fff; text-decoration: none; font-weight: 500; transition: 0.3s; }
.about-text .btn-more:hover { background: #0054a6; }
.about-img { flex: 1; height: 400px; border-radius: 10px; overflow: hidden; }
.about-img img { width: 100%; height: 100%; object-fit: cover; }
/* 4. 갤러리 */
.gallery-section { padding: 80px 15px; }
.gallery-list { display: flex; flex-wrap: wrap; gap: 20px; }
/* 5. 고객센터 & 지도 */
.contact-map-section { padding: 80px 0; background: #fff; border-top: 1px solid #eee; }
.contact-map-section .container { display: flex; gap: 30px; }
.contact-info-box { flex: 0 0 350px; background: #0054a6; color: #fff; padding: 40px; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; }
.contact-info-box h3 { font-size: 24px; font-weight: 700; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 20px; }
.contact-info-box .tel { font-size: 36px; font-weight: 700; margin-bottom: 20px; }
.contact-info-box .desc { font-size: 15px; line-height: 1.6; margin-bottom: 30px; opacity: 0.9; }
.contact-info-box .btns { display: flex; gap: 10px; }
.contact-info-box .btns a { flex: 1; text-align: center; padding: 12px 0; background: rgba(255,255,255,0.2); color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,0.3); transition: 0.3s; }
.contact-info-box .btns a:hover { background: #fff; color: #0054a6; }
.map-box { flex: 1; height: 400px; background: #ddd; border-radius: 10px; overflow: hidden; }
/* Process Section */
.process-section {
padding: var(--spacing-sm) 0;
background: var(--bg-secondary);
}
.process-timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.process-timeline::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
}
.process-step {
display: flex;
align-items: center;
margin-bottom: var(--spacing-2xl);
position: relative;
opacity: 0;
transform: translateY(30px);
}
.process-step.animate-in {
opacity: 1;
transform: translateY(0);
}
.process-step:nth-child(even) {
flex-direction: row-reverse;
}
/* 반응형 */
@media (max-width: 991px) {
.main-visual { height: 500px; padding-top: 60px; } /* 모바일 헤더 높이에 맞게 조정 */
.main-visual .swiper-button-next,
.main-visual .swiper-button-prev {
top: calc(50% + 30px);
}
.visual-title { font-size: 36px; }
.visual-subtitle { font-size: 20px; }
.product-item { width: 48%; }
.about-content { flex-direction: column; }
.about-img { width: 100%; height: 300px; }
.contact-map-section .container { flex-direction: column; }
.contact-info-box { width: 100%; flex: auto; }
.map-box { height: 300px; }
.main-visual .swiper-button-prev .thumb-wrapper,
.main-visual .swiper-button-next .thumb-wrapper {
display: none; /* 모바일에서는 썸네일 미리보기 숨김 */
}
}
@media (max-width: 480px) {
.main-visual { height: 400px; }
.visual-title { font-size: 28px; }
.visual-subtitle { font-size: 16px; }
.visual-divider { margin: 20px auto; }
.product-item { width: 100%; }
}
theme/rd.dnssash/rb.layout/dnssash_main/images/1.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 513 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/10.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 537 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/2.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 496 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/3.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 547 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/4.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 679 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/5.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 512 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/6.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 523 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/7.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 561 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/8.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 562 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/9.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 615 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/jpg/1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 MiB

theme/rd.dnssash/rb.layout/dnssash_main/images/jpg/10.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 MiB

theme/rd.dnssash/rb.layout/dnssash_main/images/jpg/2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 MiB

theme/rd.dnssash/rb.layout/dnssash_main/images/jpg/3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 MiB

theme/rd.dnssash/rb.layout/dnssash_main/images/jpg/4.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.9 MiB

theme/rd.dnssash/rb.layout/dnssash_main/images/jpg/5.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 MiB

theme/rd.dnssash/rb.layout/dnssash_main/images/jpg/6.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 MiB

theme/rd.dnssash/rb.layout/dnssash_main/images/jpg/7.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 MiB

theme/rd.dnssash/rb.layout/dnssash_main/images/jpg/8.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 MiB

theme/rd.dnssash/rb.layout/dnssash_main/images/jpg/9.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 MiB

theme/rd.dnssash/rb.layout/dnssash_main/images/jpg/main.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 MiB

theme/rd.dnssash/rb.layout/dnssash_main/images/main.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 185 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/webp/1.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 513 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/webp/10.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 537 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/webp/2.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 496 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/webp/3.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 547 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/webp/4.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 679 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/webp/5.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 512 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/webp/6.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 523 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/webp/7.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 561 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/webp/8.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 562 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/webp/9.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 615 KiB

theme/rd.dnssash/rb.layout/dnssash_main/images/webp/main.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 238 KiB

theme/rd.dnssash/rb.layout/dnssash_main/img/back012.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 512 KiB

theme/rd.dnssash/rb.layout/dnssash_main/img/back014.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 577 KiB

theme/rd.dnssash/rb.layout/dnssash_main/img/back20.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 550 KiB

theme/rd.dnssash/rb.layout/dnssash_main/img/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

theme/rd.dnssash/rb.layout/dnssash_main/img/logo_footer.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

theme/rd.dnssash/rb.layout/dnssash_main/img/main1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 716 KiB

theme/rd.dnssash/rb.layout/dnssash_main/img/slider-text4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

theme/rd.dnssash/rb.layout/dnssash_main/img/slider-text5.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

theme/rd.dnssash/rb.layout/dnssash_main/img/slider-text8.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

theme/rd.dnssash/rb.layout/dnssash_main/index.php
+380
View File
@@ -0,0 +1,380 @@
<?php
if (!defined('_GNUBOARD_')) exit;
$skin_url = G5_THEME_URL . '/rb.layout/dnssash_main';
$today = G5_TIME_YMD;
function process_product_positions(&$db_products, $main_visual_data) {
if (empty($db_products)) return;
foreach ($db_products as &$product) {
// 기본값 설정 (매칭 실패 시 xPct 기준으로 자동 배정)
$product['pos'] = (isset($product['xPct']) && $product['xPct'] < 50) ? 'left' : 'right';
// 메인 비주얼 데이터와 비교하여 정확한 위치 찾기
foreach ($main_visual_data as $main_item) {
if ($product['title'] == $main_item['title']) {
if (isset($main_item['pos'])) {
$product['pos'] = $main_item['pos'];
$product['img_url'] = $main_item['img_url'];
}
break;
}
}
}
unset($product);
}
// 1. 게시판 데이터 로드 시도
$bo_table = 'bconstruction'; // 게시판 ID
$sql = " select * from {$g5['write_prefix']}$bo_table
WHERE wr_is_comment = 0 AND wr_10 = '0' AND (wr_9 = 'IMMEDIATE' OR (wr_9 = 'RESERVED' AND '{$today}' BETWEEN wr_2 AND wr_3))
ORDER BY CASE wr_1 WHEN 'IMMEDIATE' THEN 1 ELSE 2 END, wr_num, wr_reply";
//where wr_is_comment = 0 order by wr_id asc ";
$result = sql_query($sql);
$db_products = array();
$main_visual_product_data = [
["title" => "입면분할창","pos"=>"left", "page" => "20p", "desc" => "조망권과 환기를 극대화한 시스템", "img_url" => $skin_url . '/images/1.webp', 'xPct'=> 63.0, 'yPct'=> 24.0],
["title" => "프로젝트창","pos"=>"left", "page" => "48p", "desc" => "기밀성이 우수한 상부 개폐식 창호", "img_url" => $skin_url . '/images/2' . '.webp', "xPct" => 71.0, "yPct" => 30.3],
["title" => "소형단창,이중창","pos"=>"left", "page" => "36p", "desc" => "침실 소형 전용 슬라이딩 창호", "img_url" => $skin_url . '/images/3' . '.webp', "xPct" => 80.7, "yPct" => 43.6],
["title" => "학교창","pos"=>"left", "page" => "40p", "desc" => "안전 기능이 강화된 환기창", "img_url" => $skin_url . '/images/5' . '.webp', "xPct" => 78.7, "yPct" => 41.4],
["title" => "판넬창", "pos"=>"left","page" => "44p", "desc" => "벽체 마감용 내구성 우수 창호", "img_url" => $skin_url . '/images/4' . '.webp', "xPct" => 5.7, "yPct" => 91.4],
["title" => "대형단창","pos"=>"right", "page" => "32p", "desc" => "발코니 전용 단열 슬라이딩 단창", "img_url" => $skin_url . '/images/6' . '.webp', "xPct" => 25.6, "yPct" => 36.0],
["title" => "대형이중창","pos"=>"right", "page" => "28p", "desc" => "방음 및 풍압 견딤력이 우수한 이중창", "img_url" => $skin_url . '/images/7' . '.webp', "xPct" => 36.9, "yPct" => 29.8],
["title" => "스마트 발코니 전용창","pos"=>"right", "page" => "12p", "desc" => "외창 전용 고기밀 샷시", "img_url" => $skin_url . '/images/8' . '.webp', "xPct" => 23.0, "yPct" => 37.8],
["title" => "스마트 이중창","pos"=>"right", "page" => "24p", "desc" => "보안이 강화된 자동잠금 이중창", "img_url" => $skin_url . '/images/9' . '.webp', "xPct" => 46.7, "yPct" => 22.8],
["title" => "발코니 확장 이중창","pos"=>"right", "page" => "16p", "desc" => "거실 확장용 고단열 이중창", "img_url" => $skin_url . '/images/10' . '.webp', "xPct" => 50.4, "yPct" => 20.8],
];
while($row = sql_fetch_array($result)) {
// 💡 [수정] 게시판의 첫 번째 첨부파일(bf_no = 0)을 가져옵니다.
$sql_file = " select bf_file from {$g5['board_file_table']} where bo_table = '{$bo_table}' and wr_id = '{$row['wr_id']}' and bf_no = 0 ";
$file = sql_fetch($sql_file);
if (isset($file['bf_file']) && $file['bf_file']) {
// 실제 업로드된 파일 경로
$img_url = G5_DATA_URL . '/file/' . $bo_table . '/' . $file['bf_file'];
} else {
// 파일이 없을 경우 기본 이미지 또는 기존 방식 사용 (fallback)
$encoded_filename = rawurlencode($row['wr_subject']);
$img_url = $skin_url . '/images/' . $encoded_filename . '.png';
}
$link_set = null;
if(isset($row['wr_7']) && !empty($row['wr_7']) && $row['wr_7'] != 0 && $row['wr_7'] != '') {
$link_set = get_pretty_url("product", $row['wr_7']);
}
$db_products[] = array(
"title" => $row['wr_subject'],
"page" => $row['wr_4'],
"desc" => $row['wr_1'],
"content" => conv_content($row['wr_content'], 1), // 💡 클릭용 에디터 HTML 원본
"xPct" => (float)$row['wr_5'],
"yPct" => ((float)$row['wr_6']),
"pruimg_url" => $img_url,
"img_url" => '',
"link" => $link_set, // 💡 게시글 상세 주소 추가
);
}
//$db_products =null;
if (empty($db_products)) {
$db_products = [
["title" => "입면분할창", "pos"=>"left", "page" => "20p", "desc" => "조망권과 환기를 극대화한 시스템", "pruimg_url" => $skin_url . '/images/1.webp',"img_url" => $skin_url . '/images/1.webp', 'xPct'=> 63.0, 'yPct'=> 24.0,],
["title" => "프로젝트창","pos"=>"left", "page" => "48p", "desc" => "기밀성이 우수한 상부 개폐식 창호", "pruimg_url" => $skin_url . '/images/2.webp',"img_url" => $skin_url . '/images/2' . '.webp', "xPct" => 71.0, "yPct" => 30.3],
["title" => "소형단창,이중창","pos"=>"left", "page" => "36p", "desc" => "침실 소형 전용 슬라이딩 창호", "pruimg_url" => $skin_url . '/images/3.webp',"img_url" => $skin_url . '/images/3' . '.webp', "xPct" => 80.7, "yPct" => 43.6],
["title" => "학교창","pos"=>"left", "page" => "40p", "desc" => "안전 기능이 강화된 환기창", "pruimg_url" => $skin_url . '/images/5.webp',"img_url" => $skin_url . '/images/5' . '.webp', "xPct" => 78.7, "yPct" => 41.4],
["title" => "판넬창", "pos"=>"left", "page" => "44p", "desc" => "벽체 마감용 내구성 우수 창호", "pruimg_url" => $skin_url . '/images/4.webp',"img_url" => $skin_url . '/images/4' . '.webp', "xPct" => 5.7, "yPct" => 91.4],
["title" => "대형단창","pos"=>"right", "page" => "32p", "desc" => "발코니 전용 단열 슬라이딩 단창", "pruimg_url" => $skin_url . '/images/6.webp',"img_url" => $skin_url . '/images/6' . '.webp', "xPct" => 25.6, "yPct" => 36.0],
["title" => "대형이중창","pos"=>"right", "page" => "28p", "desc" => "방음 및 풍압 견딤력이 우수한 이중창","pruimg_url" => $skin_url . '/images/7.webp', "img_url" => $skin_url . '/images/7' . '.webp', "xPct" => 36.9, "yPct" => 29.8],
["title" => "스마트 발코니 전용창","pos"=>"right", "page" => "12p", "desc" => "외창 전용 고기밀 샷시","pruimg_url" => $skin_url . '/images/8.webp', "img_url" => $skin_url . '/images/8' . '.webp', "xPct" => 23.0, "yPct" => 37.8],
["title" => "스마트 이중창","pos"=>"right", "right" => "24p", "desc" => "보안이 강화된 자동잠금 이중창","pruimg_url" => $skin_url . '/images/9.webp', "img_url" => $skin_url . '/images/9' . '.webp', "xPct" => 46.7, "yPct" => 22.8],
["title" => "발코니 확장 이중창","pos"=>"right", "page" => "16p", "desc" => "거실 확장용 고단열 이중창","pruimg_url" => $skin_url . '/images/10.webp', "img_url" => $skin_url . '/images/10' . '.webp', "xPct" => 50.4, "yPct" => 20.8],
];
} else {
process_product_positions($db_products, $main_visual_product_data);
}
/**
* 2. 특정 방향(left/right)의 제품 아이템들을 출력하는 함수
*/
function render_product_side($db_products, $side) {
if (empty($db_products)) return '';
$html = '';
foreach ($db_products as $item) {
// 지정된 방향(left/right)의 아이템만 필터링
if ($item['pos'] !== $side) continue;
// 링크 속성 준비 (prolink 값이 있을 때만 생성)
$link_attr = (isset($item['link']) && !empty($item['link'])) ? ' data-prolink="'.$item['link'].'"' : '';
// HTML 문자열 생성
$html .= '
<div class="product-item"
data-x1="'.$item['xPct'].'"
data-y1="'.$item['yPct'].'"
data-img="'.$item['pruimg_url'].'"
'.$link_attr.'>
<div class="product-img">
<img src="'.$item['img_url'].'" alt="'.htmlspecialchars($item['title']).'">
</div>
<div class="product-info">
<h3>'.$item['title'].'</h3>
<p>'.$item['desc'].'</p>
</div>
</div>';
}
return $html;
}
$layout_grid_config = [
'top' => [
'columns' => [
['rows' => 1], // 1번 열: 1행 (통짜)
['rows' => 1], // 2번 열: 2행 (상하 분할)
]
],
// 'middle' => [
// 'columns' => [
// ['rows' => 2], // 1번 열: 2행
// ['rows' => 2], // 2번 열: 2행
// ],
//
// ],
// 'bottom' => [
// 'columns' => [
// ['rows' => 1] // 1번 열: 1행 (통짜)
// ]
// ]
];
// 테마 스타일 및 스크립트 로드
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/products.css?ver='.G5_CSS_VER.'">', 0);
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/products2.css?ver='.G5_CSS_VER.'">', 0);
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/main.css?ver='.G5_CSS_VER.'">', 0);
//add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/style.css?ver='.G5_CSS_VER.'">', 0);
add_stylesheet('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />', 0);
add_javascript('<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>', 0);
//add_javascript('<script src="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/js/products.js?ver='.G5_CSS_VER.'"></script>', 0);
add_javascript('<script src="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/js/products2.js?ver='.G5_CSS_VER.'"></script>', 0);
include_once(G5_ADMIN_PATH . '/order_manage/components/_expert_visit_popups.php');
?>
<div class="main-container">
<!-- 1. 메인 비주얼 섹션 (클래스명 변경됨) -->
<section class="map-main-visual">
<div class="visual-slider swiper-container">
<div class="swiper-wrapper">
<?php
$main_visual_data = [
['bg' => 'back20.jpg', 'subtitle' => '이끌림으로 품격을 높이다!'],
['bg' => 'back014.jpg', 'subtitle' => '유려하고 모던한 디자인으로<br>공간의 품격을 한단계 높여줍니다.'],
['bg' => 'back012.jpg', 'subtitle' => '다년간의 축적된 노하우와 기술력으로<br>최상의 만족을 드립니다.']
];
foreach ($main_visual_data as $item) {
?>
<div class="swiper-slide" data-thumb-bg="<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>">
<a href="#" class="map-visual-link">
<div class="map-visual-img" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>');"></div>
<div class="map-visual-layer-wrap">
<div class="visual-layer-item">
<h2 class="map-visual-title">PREMIUM DESIGN</h2>
<span class="map-visual-divider"></span>
<p class="map-visual-subtitle"><?php echo $item['subtitle']; ?></p>
</div>
</div>
</a>
</div>
<?php } ?>
</div>
<div class="swiper-pagination"></div>
<!-- 네비게이션 버튼 (클래스명 변경됨) -->
<div class="swiper-button-prev">
<div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
</div>
<div class="swiper-button-next">
<div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
</div>
</div>
</section>
</div>
<div class="product-section">
<div class="product-side left">
<?php echo render_product_side( $db_products, 'left');?>
</div>
<div class="product-main">
<img src='<?php echo $skin_url?>/images/main.webp' alt="메인 사진">
<div class="product-hotspot"></div>
</div>
<div class="product-side right">
<?php echo render_product_side( $db_products, 'right');?>
</div>
</div>
<div class="main-container">
<div class="main-visual">
<section class="process-section">
<div class="container">
<main class="layout-main-content1">
<?php foreach ($layout_grid_config as $row_name => $row_config): ?>
<!-- 행(Row) 시작 -->
<div class="layout-row layout-row-<?php echo $row_name; ?>">
<?php
$columns = $row_config['columns'];
$col_index = 1;
foreach ($columns as $col_config):
$row_count = isset($col_config['rows']) ? $col_config['rows'] : 1;
?>
<!-- 열(Column) 시작 -->
<div class="layout-col layout-col-<?php echo $col_index; ?>">
<?php for ($r = 1; $r <= $row_count; $r++): ?>
<!-- 내부 행(Inner Row) 시작 -->
<div class="flex_box layout-inner-row" data-layout="main-content-<?php echo $row_name; ?>-col<?php echo $col_index; ?>-row<?php echo $r; ?>">
</div>
<?php endfor; ?>
</div>
<?php
$col_index++;
endforeach;
?>
</div>
<!-- 행(Row) 끝 -->
<?php endforeach; ?>
</main>
</div>
</section>
<section class="min-h-screen flex flex-col items-center justify-center p-6">
<div class="mb-10 text-center">
<h1 class="text-3xl md:text-4xl font-bold text-white mb-3">
고객의 공간을 완성하는 프리미엄 창호 시스템 <span class="highlight_blue">이끌림샤시</span>로 시작하세요
</h1>
<p class="text-gray-300 text-sm md:text-base max-w-2xl mx-auto leading-relaxed">
고객의 생활 공간을 고려한 설계와 정밀한 기술력으로<br>
최고의 품질과 안정적인 A/S를 제공합니다.
</p>
</div>
<section class="hero_container">
<div class="content_inner">
<!-- <img src="--><?php //echo G5_THEME_URL ?><!--/rb.layout/dnssash/img/main1.png" alt="메인 배경 이미지" class="main_bg_img">-->
<div class="text_area">
<p class="label_blue">SMART WINDOW ORDERING</p>
<h1 class="main_title">
창호의 새로운 기준,<br>
<span class="highlight_blue">이끌림샤시</span>로 시작하세요
</h1>
<p class="sub_description">
복잡한 창호 교체, 이제 온라인 견적으로 투명하게.<br>
고품질 자재와 전문가의 손길을 클릭 한 번으로 만나보세요.
</p>
<!-- 전문가 상담 및 예약 버튼 (상단 오른쪽) -->
<div class="main_action_row">
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=order" class="btn_box white" >
<div class="btn_icon">🏢</div>
<div class="btn_txt">
<strong>창호 온라인 주문</strong>
<p>실시간 직접 견적 및 주문 확정</p>
</div>
</a>
<div class="btn_box white" onclick="openExpertVisitPopup(<?php /*echo $wr_id; */?>)">
<div class="btn_icon">👨‍🔧</div>
<div class="btn_txt">
<strong>창호 전문가 부르기</strong>
<p>방문 실측 및 맞춤 상담 신청</p>
</div>
</div>
</div>
</div>
<div class="floating_as_badge">
<p>전국 대리점망</p>
<strong>A/S 10년 보장</strong>
</div>
</div>
</section>
</section>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const productsData = <?php echo json_encode($db_products); ?>;
if (typeof initProducts === 'function') {
initProducts(productsData);
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
// .map-main-visual 안에 있는 슬라이더만 타겟팅
var mainVisualSwiper = new Swiper('.map-main-visual .visual-slider', {
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function () {
updateNavThumbs(this);
},
slideChangeTransitionEnd: function () {
updateNavThumbs(this);
},
},
});
function updateNavThumbs(swiper) {
// 루프 모드에서 슬라이더의 실제 DOM 요소를 기반으로 이전/다음 슬라이드 찾기
var slides = swiper.slides;
var activeIndex = swiper.activeIndex;
// 이전 슬라이드와 다음 슬라이드 요소 추출
var prevSlide = slides[activeIndex - 1];
var nextSlide = slides[activeIndex + 1];
// 만약 슬라이드가 존재한다면 썸네일 주소 가져오기
var prevThumb = prevSlide ? prevSlide.getAttribute('data-thumb-bg') : '';
var nextThumb = nextSlide ? nextSlide.getAttribute('data-thumb-bg') : '';
// 수정된 클래스명 .map-thumb 을 찾아서 배경 이미지 적용
if (prevThumb) {
var prevTarget = swiper.navigation.prevEl.querySelector('.map-thumb');
if (prevTarget) prevTarget.style.backgroundImage = 'url(' + prevThumb + ')';
}
if (nextThumb) {
var nextTarget = swiper.navigation.nextEl.querySelector('.map-thumb');
if (nextTarget) nextTarget.style.backgroundImage = 'url(' + nextThumb + ')';
}
}
});
</script>
theme/rd.dnssash/rb.layout/dnssash_main/index.php_backup
+248
View File
@@ -0,0 +1,248 @@
<?php
if (!defined('_GNUBOARD_')) exit;
$skin_url = G5_THEME_URL . '/skin/page/products_main';
$today = G5_TIME_YMD;
// 1. 게시판 데이터 로드 시도
$bo_table = 'bconstruction'; // 게시판 ID
$sql = " select * from {$g5['write_prefix']}$bo_table
WHERE wr_is_comment = 0 AND wr_10 = '0' AND (wr_9 = 'IMMEDIATE' OR (wr_9 = 'RESERVED' AND '{$today}' BETWEEN wr_2 AND wr_3))
ORDER BY CASE wr_1 WHEN 'IMMEDIATE' THEN 1 ELSE 2 END, wr_num, wr_reply LIMIT 1 ";
//where wr_is_comment = 0 order by wr_id asc ";
$result = sql_query($sql);
$db_products = array();
while($row = sql_fetch_array($result)) {
// 💡 [수정] 게시판의 첫 번째 첨부파일(bf_no = 0)을 가져옵니다.
$sql_file = " select bf_file from {$g5['board_file_table']} where bo_table = '{$bo_table}' and wr_id = '{$row['wr_id']}' and bf_no = 0 ";
$file = sql_fetch($sql_file);
if (isset($file['bf_file']) && $file['bf_file']) {
// 실제 업로드된 파일 경로
$img_url = G5_DATA_URL . '/file/' . $bo_table . '/' . $file['bf_file'];
} else {
// 파일이 없을 경우 기본 이미지 또는 기존 방식 사용 (fallback)
$encoded_filename = rawurlencode($row['wr_subject']);
$img_url = $skin_url . '/images/' . $encoded_filename . '.png';
}
$db_products[] = array(
"title" => $row['wr_subject'],
"page" => $row['wr_4'],
"desc" => strip_tags($row['wr_content']),
"xPct" => (float)$row['wr_5'],
"yPct" => (float)$row['wr_6'],
"img_url" => $img_url
);
}
if (empty($db_products)) {
$db_products = [
["title" => "입면분할창", "page" => "20p", "desc" => "조망권과 환기를 극대화한 시스템", "img_url" => $skin_url . '/images/입면분할창' . '.jpg', 'xPct'=> 44.5, 'yPct'=> 11.4],
["title" => "프로젝트창", "page" => "48p", "desc" => "기밀성이 우수한 상부 개폐식 창호", "img_url" => $skin_url . '/images/프로젝트창' . '.jpg', "xPct" => 29.4, "yPct" => 22.3],
["title" => "소형단창 _ 이중창", "page" => "36p", "desc" => "침실 소형 전용 슬라이딩 창호", "img_url" => $skin_url . '/images/소형단창 _ 이중창' . '.jpg', "xPct" => 15.4, "yPct" => 30.8],
["title" => "이끌림 도어", "page" => "도어", "desc" => "단열 성능이 뛰어난 시스템 도어", "img_url" => $skin_url . '/images/이끌림 도어' . '.jpg', "xPct" => 31.9, "yPct" => 43.8],
["title" => "이끌림 중문", "page" => "중문", "desc" => "소음 및 미세먼지 차단 슬림 중문", "img_url" => $skin_url . '/images/이끌림 중문' . '.jpg', "xPct" => 32.3, "yPct"=> 57.4],
["title" => "이끌림 마루", "page" => "마루", "desc" => "친환경 온돌 마루 시스템", "img_url" => $skin_url . '/images/이끌림 마루' . '.jpg', "xPct" => 57.1, "yPct" => 24.2],
["title" => "대형단창", "page" => "32p", "desc" => "발코니 전용 단열 슬라이딩 단창", "img_url" => $skin_url . '/images/대형단창' . '.jpg', "xPct" => 62.2, "yPct" => 18.1],
["title" => "대형이중창", "page" => "28p", "desc" => "방음 및 풍압 견딤력이 우수한 이중창", "img_url" => $skin_url . '/images/대형이중창' . '.jpg', "xPct" => 62.2, "yPct" => 18.1],
["title" => "스마트 발코니 전용창", "page" => "12p", "desc" => "외창 전용 고기밀 샷시", "img_url" => $skin_url . '/images/스마트 발코니 전용창' . '.jpg', "xPct" => 62.2, "yPct" => 18.1],
["title" => "이끌림 몰딩", "page" => "몰딩", "desc" => "고급 인테리어 마감재", "img_url" => $skin_url . '/images/이끌림 몰딩' . '.jpg', "xPct" => 70.1, "yPct" => 37.4],
["title" => "스마트 이중창", "page" => "24p", "desc" => "보안이 강화된 자동잠금 이중창", "img_url" => $skin_url . '/images/스마트 이중창' . '.jpg', "xPct" => 81.8, "yPct" => 38.5],
["title" => "발코니 확장 이중창", "page" => "16p", "desc" => "거실 확장용 고단열 이중창", "img_url" => $skin_url . '/images/발코니 확장 이중창' . '.jpg', "xPct" => 81.8, "yPct" => 38.5],
["title" => "판넬창", "page" => "44p", "desc" => "벽체 마감용 내구성 우수 창호", "img_url" => $skin_url . '/images/판넬창' . '.jpg', "xPct" => 5.7, "yPct" => 91.4],
["title" => "학교창", "page" => "40p", "desc" => "안전 기능이 강화된 환기창", "img_url" => $skin_url . '/images/학교창' . '.jpg', "xPct" => 21.5, "yPct" => 90.9],
];
}
// 테마 스타일 및 스크립트 로드
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/products.css?ver='.G5_CSS_VER.'">', 0);
//add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/style.css?ver='.G5_CSS_VER.'">', 0);
add_stylesheet('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />', 0);
add_javascript('<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>', 0);
add_javascript('<script src="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/js/products.js_baccc"></script>', 0);
?>
<div class="main-container">
<!-- 1. 메인 비주얼 섹션 (클래스명 변경됨) -->
<section class="map-main-visual">
<div class="visual-slider swiper-container">
<div class="swiper-wrapper">
<?php
var_dump($sql);
$main_visual_data = [
['bg' => 'back20.jpg', 'subtitle' => '이끌림으로 품격을 높이다!'],
['bg' => 'back014.jpg', 'subtitle' => '유려하고 모던한 디자인으로<br>공간의 품격을 한단계 높여줍니다.'],
['bg' => 'back012.jpg', 'subtitle' => '다년간의 축적된 노하우와 기술력으로<br>최상의 만족을 드립니다.']
];
foreach ($main_visual_data as $item) {
?>
<div class="swiper-slide" data-thumb-bg="<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>">
<a href="#" class="map-visual-link">
<div class="map-visual-img" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>');"></div>
<div class="map-visual-layer-wrap">
<div class="visual-layer-item">
<h2 class="map-visual-title">PREMIUM DESIGN</h2>
<span class="map-visual-divider"></span>
<p class="map-visual-subtitle"><?php echo $item['subtitle']; ?></p>
</div>
</div>
</a>
</div>
<?php } ?>
</div>
<div class="swiper-pagination"></div>
<!-- 네비게이션 버튼 (클래스명 변경됨) -->
<div class="swiper-button-prev">
<div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
</div>
<div class="swiper-button-next">
<div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
</div>
</div>
</section>
</div>
<div class="main-container">
<div class="main-visual">
<section class="min-h-screen flex flex-col items-center justify-center p-6">
<div class="mb-10 text-center">
<h1 class="text-3xl md:text-4xl font-bold text-white mb-3">
고객의 공간을 완성하는 프리미엄 창호 시스템 <span class="highlight_blue">이끌림샤시</span>로 시작하세요
</h1>
<p class="text-gray-300 text-sm md:text-base max-w-2xl mx-auto leading-relaxed">
고객의 생활 공간을 고려한 설계와 정밀한 기술력으로<br>
최고의 품질과 안정적인 A/S를 제공합니다.
</p>
</div>
<section class="product-map-section py-10 bg-[#0b0f1a]">
<div class="mb-10 text-center">
<div class="container mx-auto px-4">
<div class="flex justify-center">
<div class="map-wrapper">
<div class="map-container" id="main-map" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash_main/images/메인.png');">
<div id="hotspot-layer"></div>
</div>
<!-- <div id="coord-display" class="coord-guide">COORD - X: 0.0%, Y: 0.0%</div>-->
</div>
</div>
</div>
<!-- 그룹 미리보기 팝업 레이어 -->
<div id="hover-preview">
<div class="flex items-center gap-3 mb-5 border-b border-white/10 pb-4">
<i class="fa-solid fa-box-open text-blue-500"></i>
<h2 class="text-white font-bold text-lg">상세 정보</h2>
</div>
<div class="products-grid" id="preview-grid"></div>
</div>
</div>
</section>
<section class="hero_container">
<div class="content_inner">
<!-- <img src="--><?php //echo G5_THEME_URL ?><!--/rb.layout/dnssash/img/main1.png" alt="메인 배경 이미지" class="main_bg_img">-->
<div class="text_area">
<p class="label_blue">SMART WINDOW ORDERING</p>
<h1 class="main_title">
창호의 새로운 기준,<br>
<span class="highlight_blue">이끌림샤시</span>로 시작하세요
</h1>
<p class="sub_description">
복잡한 창호 교체, 이제 온라인 견적으로 투명하게.<br>
고품질 자재와 전문가의 손길을 클릭 한 번으로 만나보세요.
</p>
<!-- 전문가 상담 및 예약 버튼 (상단 오른쪽) -->
<div class="main_action_row">
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=order" class="btn_box white" >
<div class="btn_icon">🏢</div>
<div class="btn_txt">
<strong>창호 온라인 주문</strong>
<p>실시간 직접 견적 및 주문 확정</p>
</div>
</a>
<div class="btn_box white" onclick="openExpertVisitPopup(<?php /*echo $wr_id; */?>)">
<div class="btn_icon">👨‍🔧</div>
<div class="btn_txt">
<strong>창호 전문가 부르기</strong>
<p>방문 실측 및 맞춤 상담 신청</p>
</div>
</div>
</div>
</div>
<div class="floating_as_badge">
<p>전국 대리점망</p>
<strong>A/S 10년 보장</strong>
</div>
</div>
</section>
</section>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const productsData = <?php echo json_encode($db_products); ?>;
if (typeof initProducts === 'function') {
initProducts(productsData);
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
// .map-main-visual 안에 있는 슬라이더만 타겟팅
var mainVisualSwiper = new Swiper('.map-main-visual .visual-slider', {
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function () {
updateNavThumbs(this);
},
slideChangeTransitionEnd: function () {
updateNavThumbs(this);
},
},
});
function updateNavThumbs(swiper) {
// 루프 모드에서 슬라이더의 실제 DOM 요소를 기반으로 이전/다음 슬라이드 찾기
var slides = swiper.slides;
var activeIndex = swiper.activeIndex;
// 이전 슬라이드와 다음 슬라이드 요소 추출
var prevSlide = slides[activeIndex - 1];
var nextSlide = slides[activeIndex + 1];
// 만약 슬라이드가 존재한다면 썸네일 주소 가져오기
var prevThumb = prevSlide ? prevSlide.getAttribute('data-thumb-bg') : '';
var nextThumb = nextSlide ? nextSlide.getAttribute('data-thumb-bg') : '';
// 수정된 클래스명 .map-thumb 을 찾아서 배경 이미지 적용
if (prevThumb) {
var prevTarget = swiper.navigation.prevEl.querySelector('.map-thumb');
if (prevTarget) prevTarget.style.backgroundImage = 'url(' + prevThumb + ')';
}
if (nextThumb) {
var nextTarget = swiper.navigation.nextEl.querySelector('.map-thumb');
if (nextTarget) nextTarget.style.backgroundImage = 'url(' + nextThumb + ')';
}
}
});
</script>
theme/rd.dnssash/rb.layout/dnssash_main/index_main.php
+270
View File
@@ -0,0 +1,270 @@
<?php
if (!defined('_GNUBOARD_')) exit;
$skin_url = G5_THEME_URL . '/rb.layout/dnssash_main';
$today = G5_TIME_YMD;
// 1. 게시판 데이터 로드 시도
$bo_table = 'bconstruction'; // 게시판 ID
$sql = " select * from {$g5['write_prefix']}$bo_table
WHERE wr_is_comment = 0 AND wr_10 = '0' AND (wr_9 = 'IMMEDIATE' OR (wr_9 = 'RESERVED' AND '{$today}' BETWEEN wr_2 AND wr_3))
ORDER BY CASE wr_1 WHEN 'IMMEDIATE' THEN 1 ELSE 2 END, wr_num, wr_reply";
//where wr_is_comment = 0 order by wr_id asc ";
$result = sql_query($sql);
$db_products = array();
while($row = sql_fetch_array($result)) {
// 💡 [수정] 게시판의 첫 번째 첨부파일(bf_no = 0)을 가져옵니다.
$sql_file = " select bf_file from {$g5['board_file_table']} where bo_table = '{$bo_table}' and wr_id = '{$row['wr_id']}' and bf_no = 0 ";
$file = sql_fetch($sql_file);
if (isset($file['bf_file']) && $file['bf_file']) {
// 실제 업로드된 파일 경로
$img_url = G5_DATA_URL . '/file/' . $bo_table . '/' . $file['bf_file'];
} else {
// 파일이 없을 경우 기본 이미지 또는 기존 방식 사용 (fallback)
$encoded_filename = rawurlencode($row['wr_subject']);
$img_url = $skin_url . '/images/' . $encoded_filename . '.png';
}
$link_set = null;
if(isset($row['wr_7']) && !empty($row['wr_7']) && $row['wr_7'] != 0 && $row['wr_7'] != '') {
$link_set = get_pretty_url("product", $row['wr_7']);
}
$db_products[] = array(
"title" => $row['wr_subject'],
"page" => $row['wr_4'],
"desc" => $row['wr_1'],
"content" => conv_content($row['wr_content'], 1), // 💡 클릭용 에디터 HTML 원본
"xPct" => (float)$row['wr_5'],
"yPct" => ((float)$row['wr_6']),
"img_url" => $img_url,
"link" => $link_set, // 💡 게시글 상세 주소 추가
);
}
if (empty($db_products)) {
$db_products = [
["title" => "입면분할창", "page" => "20p", "desc" => "조망권과 환기를 극대화한 시스템", "img_url" => $skin_url . '/images/1.jpg', 'xPct'=> 63.0, 'yPct'=> 24.0],
["title" => "프로젝트창", "page" => "48p", "desc" => "기밀성이 우수한 상부 개폐식 창호", "img_url" => $skin_url . '/images/2' . '.jpg', "xPct" => 71.0, "yPct" => 30.3],
["title" => "소형단창,이중창", "page" => "36p", "desc" => "침실 소형 전용 슬라이딩 창호", "img_url" => $skin_url . '/images/3' . '.jpg', "xPct" => 80.7, "yPct" => 43.6],
["title" => "학교창", "page" => "40p", "desc" => "안전 기능이 강화된 환기창", "img_url" => $skin_url . '/images/5' . '.jpg', "xPct" => 78.7, "yPct" => 41.4],
["title" => "대형이중창", "page" => "28p", "desc" => "방음 및 풍압 견딤력이 우수한 이중창", "img_url" => $skin_url . '/images/7' . '.jpg', "xPct" => 36.9, "yPct" => 29.8],
["title" => "대형단창", "page" => "32p", "desc" => "발코니 전용 단열 슬라이딩 단창", "img_url" => $skin_url . '/images/6' . '.jpg', "xPct" => 25.6, "yPct" => 36.0],
["title" => "스마트 발코니 전용창", "page" => "12p", "desc" => "외창 전용 고기밀 샷시", "img_url" => $skin_url . '/images/8' . '.jpg', "xPct" => 23.0, "yPct" => 37.8],
["title" => "스마트 이중창", "page" => "24p", "desc" => "보안이 강화된 자동잠금 이중창", "img_url" => $skin_url . '/images/9' . '.jpg', "xPct" => 46.7, "yPct" => 22.8],
["title" => "발코니 확장 이중창", "page" => "16p", "desc" => "거실 확장용 고단열 이중창", "img_url" => $skin_url . '/images/10' . '.jpg', "xPct" => 50.4, "yPct" => 20.8],
// ["title" => "판넬창", "page" => "44p", "desc" => "벽체 마감용 내구성 우수 창호", "img_url" => $skin_url . '/images/판넬창' . '.jpg', "xPct" => 5.7, "yPct" => 91.4],
];
}
// 테마 스타일 및 스크립트 로드
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/products.css?ver='.G5_CSS_VER.'">', 0);
//add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/style.css?ver='.G5_CSS_VER.'">', 0);
add_stylesheet('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />', 0);
add_javascript('<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>', 0);
add_javascript('<script src="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/js/products.js"></script>', 0);
include_once(G5_ADMIN_PATH . '/order_manage/components/_expert_visit_popups.php');
?>
<div class="main-container">
<!-- 1. 메인 비주얼 섹션 (클래스명 변경됨) -->
<section class="map-main-visual">
<div class="visual-slider swiper-container">
<div class="swiper-wrapper">
<?php
$main_visual_data = [
['bg' => 'back20.jpg', 'subtitle' => '이끌림으로 품격을 높이다!'],
['bg' => 'back014.jpg', 'subtitle' => '유려하고 모던한 디자인으로<br>공간의 품격을 한단계 높여줍니다.'],
['bg' => 'back012.jpg', 'subtitle' => '다년간의 축적된 노하우와 기술력으로<br>최상의 만족을 드립니다.']
];
foreach ($main_visual_data as $item) {
?>
<div class="swiper-slide" data-thumb-bg="<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>">
<a href="#" class="map-visual-link">
<div class="map-visual-img" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>');"></div>
<div class="map-visual-layer-wrap">
<div class="visual-layer-item">
<h2 class="map-visual-title">PREMIUM DESIGN</h2>
<span class="map-visual-divider"></span>
<p class="map-visual-subtitle"><?php echo $item['subtitle']; ?></p>
</div>
</div>
</a>
</div>
<?php } ?>
</div>
<div class="swiper-pagination"></div>
<!-- 네비게이션 버튼 (클래스명 변경됨) -->
<div class="swiper-button-prev">
<div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
</div>
<div class="swiper-button-next">
<div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
</div>
</div>
</section>
</div>
<div class="main-container">
<div class="main-visual">
<section class="min-h-screen flex flex-col items-center justify-center p-6">
<div class="mb-10 text-center">
<h1 class="text-3xl md:text-4xl font-bold text-white mb-3">
고객의 공간을 완성하는 프리미엄 창호 시스템 <span class="highlight_blue">이끌림샤시</span>로 시작하세요
</h1>
<p class="text-gray-300 text-sm md:text-base max-w-2xl mx-auto leading-relaxed">
고객의 생활 공간을 고려한 설계와 정밀한 기술력으로<br>
최고의 품질과 안정적인 A/S를 제공합니다.
</p>
</div>
<section class="product-map-section py-10 bg-[#0b0f1a]">
<div class="mb-10 text-center">
<div class="container mx-auto px-4">
<div class="flex justify-center">
<div class="map-wrapper">
<!-- 기존 map-container 부분을 아래와 같이 수정 -->
<div class="map-container" id="main-map" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash_main/images/main.png');">
<div id="hotspot-layer">
<?php foreach ($db_products as $index => $p) { ?>
<div class="hotspot"
style="left: <?php echo $p['xPct']; ?>%; top: <?php echo $p['yPct']; ?>%;"
data-index="<?php echo $index; ?>"
title="<?php echo $p['title']; ?>">
</div>
<?php } ?>
</div>
</div>
<!-- <div id="coord-display" class="coord-guide">COORD - X: 0.0%, Y: 0.0%</div>-->
</div>
</div>
</div>
<!-- 그룹 미리보기 팝업 레이어 -->
<div id="hover-preview">
<div class="flex items-center gap-3 mb-5 border-b border-white/10 pb-4">
<i class="fa-solid fa-box-open text-blue-500"></i>
<h2 class="text-white font-bold text-lg">상세 정보</h2>
</div>
<div class="products-grid" id="preview-grid"></div>
</div>
</div>
</section>
<section class="hero_container">
<div class="content_inner">
<!-- <img src="--><?php //echo G5_THEME_URL ?><!--/rb.layout/dnssash/img/main1.png" alt="메인 배경 이미지" class="main_bg_img">-->
<div class="text_area">
<p class="label_blue">SMART WINDOW ORDERING</p>
<h1 class="main_title">
창호의 새로운 기준,<br>
<span class="highlight_blue">이끌림샤시</span>로 시작하세요
</h1>
<p class="sub_description">
복잡한 창호 교체, 이제 온라인 견적으로 투명하게.<br>
고품질 자재와 전문가의 손길을 클릭 한 번으로 만나보세요.
</p>
<!-- 전문가 상담 및 예약 버튼 (상단 오른쪽) -->
<div class="main_action_row">
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=order" class="btn_box white" >
<div class="btn_icon">🏢</div>
<div class="btn_txt">
<strong>창호 온라인 주문</strong>
<p>실시간 직접 견적 및 주문 확정</p>
</div>
</a>
<div class="btn_box white" onclick="openExpertVisitPopup(<?php /*echo $wr_id; */?>)">
<div class="btn_icon">👨‍🔧</div>
<div class="btn_txt">
<strong>창호 전문가 부르기</strong>
<p>방문 실측 및 맞춤 상담 신청</p>
</div>
</div>
</div>
</div>
<div class="floating_as_badge">
<p>전국 대리점망</p>
<strong>A/S 10년 보장</strong>
</div>
</div>
</section>
</section>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const productsData = <?php echo json_encode($db_products); ?>;
if (typeof initProducts === 'function') {
initProducts(productsData);
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
// .map-main-visual 안에 있는 슬라이더만 타겟팅
var mainVisualSwiper = new Swiper('.map-main-visual .visual-slider', {
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function () {
updateNavThumbs(this);
},
slideChangeTransitionEnd: function () {
updateNavThumbs(this);
},
},
});
function updateNavThumbs(swiper) {
// 루프 모드에서 슬라이더의 실제 DOM 요소를 기반으로 이전/다음 슬라이드 찾기
var slides = swiper.slides;
var activeIndex = swiper.activeIndex;
// 이전 슬라이드와 다음 슬라이드 요소 추출
var prevSlide = slides[activeIndex - 1];
var nextSlide = slides[activeIndex + 1];
// 만약 슬라이드가 존재한다면 썸네일 주소 가져오기
var prevThumb = prevSlide ? prevSlide.getAttribute('data-thumb-bg') : '';
var nextThumb = nextSlide ? nextSlide.getAttribute('data-thumb-bg') : '';
// 수정된 클래스명 .map-thumb 을 찾아서 배경 이미지 적용
if (prevThumb) {
var prevTarget = swiper.navigation.prevEl.querySelector('.map-thumb');
if (prevTarget) prevTarget.style.backgroundImage = 'url(' + prevThumb + ')';
}
if (nextThumb) {
var nextTarget = swiper.navigation.nextEl.querySelector('.map-thumb');
if (nextTarget) nextTarget.style.backgroundImage = 'url(' + nextThumb + ')';
}
}
});
</script>
theme/rd.dnssash/rb.layout/dnssash_main/index_vvvv.php
+369
View File
@@ -0,0 +1,369 @@
<?php
if (!defined('_GNUBOARD_')) exit;
$skin_url = G5_THEME_URL . '/rb.layout/dnssash_main';
$today = G5_TIME_YMD;
function process_product_positions(&$db_products, $main_visual_data) {
if (empty($db_products)) return;
foreach ($db_products as &$product) {
// 기본값 설정 (매칭 실패 시 xPct 기준으로 자동 배정)
$product['pos'] = (isset($product['xPct']) && $product['xPct'] < 50) ? 'left' : 'right';
// 메인 비주얼 데이터와 비교하여 정확한 위치 찾기
foreach ($main_visual_data as $main_item) {
if ($product['title'] === $main_item['title']) {
if (isset($main_item['pos'])) {
$product['pos'] = $main_item['pos'];
$product['img_url'] = $main_item['img_url'];
}
break;
}
}
}
unset($product);
}
// 1. 게시판 데이터 로드 시도
$bo_table = 'bconstruction'; // 게시판 ID
$sql = " select * from {$g5['write_prefix']}$bo_table
WHERE wr_is_comment = 0 AND wr_10 = '0' AND (wr_9 = 'IMMEDIATE' OR (wr_9 = 'RESERVED' AND '{$today}' BETWEEN wr_2 AND wr_3))
ORDER BY CASE wr_1 WHEN 'IMMEDIATE' THEN 1 ELSE 2 END, wr_num, wr_reply";
//where wr_is_comment = 0 order by wr_id asc ";
$result = sql_query($sql);
$db_products = array();
$main_visual_product_data = [
["title" => "입면분할창","pos"=>"left", "page" => "20p", "desc" => "조망권과 환기를 극대화한 시스템", "img_url" => $skin_url . '/images/1.webp', 'xPct'=> 63.0, 'yPct'=> 24.0],
["title" => "프로젝트창","pos"=>"left", "page" => "48p", "desc" => "기밀성이 우수한 상부 개폐식 창호", "img_url" => $skin_url . '/images/2' . '.webp', "xPct" => 71.0, "yPct" => 30.3],
["title" => "소형단창,이중창","pos"=>"left", "page" => "36p", "desc" => "침실 소형 전용 슬라이딩 창호", "img_url" => $skin_url . '/images/3' . '.webp', "xPct" => 80.7, "yPct" => 43.6],
["title" => "학교창","pos"=>"left", "page" => "40p", "desc" => "안전 기능이 강화된 환기창", "img_url" => $skin_url . '/images/5' . '.webp', "xPct" => 78.7, "yPct" => 41.4],
["title" => "판넬창", "pos"=>"left","page" => "44p", "desc" => "벽체 마감용 내구성 우수 창호", "img_url" => $skin_url . '/images/4' . '.webp', "xPct" => 5.7, "yPct" => 91.4],
["title" => "대형단창","pos"=>"right", "page" => "32p", "desc" => "발코니 전용 단열 슬라이딩 단창", "img_url" => $skin_url . '/images/6' . '.webp', "xPct" => 25.6, "yPct" => 36.0],
["title" => "대형이중창","pos"=>"right", "page" => "28p", "desc" => "방음 및 풍압 견딤력이 우수한 이중창", "img_url" => $skin_url . '/images/7' . '.webp', "xPct" => 36.9, "yPct" => 29.8],
["title" => "스마트 발코니 전용창","pos"=>"right", "page" => "12p", "desc" => "외창 전용 고기밀 샷시", "img_url" => $skin_url . '/images/8' . '.webp', "xPct" => 23.0, "yPct" => 37.8],
["title" => "스마트 이중창","pos"=>"right", "page" => "24p", "desc" => "보안이 강화된 자동잠금 이중창", "img_url" => $skin_url . '/images/9' . '.webp', "xPct" => 46.7, "yPct" => 22.8],
["title" => "발코니 확장 이중창","pos"=>"right", "page" => "16p", "desc" => "거실 확장용 고단열 이중창", "img_url" => $skin_url . '/images/10' . '.webp', "xPct" => 50.4, "yPct" => 20.8],
];
while($row = sql_fetch_array($result)) {
// 💡 [수정] 게시판의 첫 번째 첨부파일(bf_no = 0)을 가져옵니다.
$sql_file = " select bf_file from {$g5['board_file_table']} where bo_table = '{$bo_table}' and wr_id = '{$row['wr_id']}' and bf_no = 0 ";
$file = sql_fetch($sql_file);
if (isset($file['bf_file']) && $file['bf_file']) {
// 실제 업로드된 파일 경로
$img_url = G5_DATA_URL . '/file/' . $bo_table . '/' . $file['bf_file'];
} else {
// 파일이 없을 경우 기본 이미지 또는 기존 방식 사용 (fallback)
$encoded_filename = rawurlencode($row['wr_subject']);
$img_url = $skin_url . '/images/' . $encoded_filename . '.png';
}
$link_set = null;
if(isset($row['wr_7']) && !empty($row['wr_7']) && $row['wr_7'] != 0 && $row['wr_7'] != '') {
$link_set = get_pretty_url("product", $row['wr_7']);
}
$db_products[] = array(
"title" => $row['wr_subject'],
"page" => $row['wr_4'],
"desc" => $row['wr_1'],
"content" => conv_content($row['wr_content'], 1), // 💡 클릭용 에디터 HTML 원본
"xPct" => (float)$row['wr_5'],
"yPct" => ((float)$row['wr_6']),
"pruimg_url" => $img_url,
"img_url" => '',
"link" => $link_set, // 💡 게시글 상세 주소 추가
);
}
//$db_products =null;
if (empty($db_products)) {
$db_products = [
["title" => "입면분할창", "pos"=>"left", "page" => "20p", "desc" => "조망권과 환기를 극대화한 시스템", "pruimg_url" => $skin_url . '/images/1.webp',"img_url" => $skin_url . '/images/1.webp', 'xPct'=> 63.0, 'yPct'=> 24.0,],
["title" => "프로젝트창","pos"=>"left", "page" => "48p", "desc" => "기밀성이 우수한 상부 개폐식 창호", "pruimg_url" => $skin_url . '/images/1.webp',"img_url" => $skin_url . '/images/2' . '.webp', "xPct" => 71.0, "yPct" => 30.3],
["title" => "소형단창,이중창","pos"=>"left", "page" => "36p", "desc" => "침실 소형 전용 슬라이딩 창호", "pruimg_url" => $skin_url . '/images/1.webp',"img_url" => $skin_url . '/images/3' . '.webp', "xPct" => 80.7, "yPct" => 43.6],
["title" => "학교창","pos"=>"left", "page" => "40p", "desc" => "안전 기능이 강화된 환기창", "pruimg_url" => $skin_url . '/images/1.webp',"img_url" => $skin_url . '/images/5' . '.webp', "xPct" => 78.7, "yPct" => 41.4],
["title" => "판넬창", "pos"=>"left", "page" => "44p", "desc" => "벽체 마감용 내구성 우수 창호", "pruimg_url" => $skin_url . '/images/1.webp',"img_url" => $skin_url . '/images/4' . '.webp', "xPct" => 5.7, "yPct" => 91.4],
["title" => "대형단창","pos"=>"right", "page" => "32p", "desc" => "발코니 전용 단열 슬라이딩 단창", "pruimg_url" => $skin_url . '/images/1.webp',"img_url" => $skin_url . '/images/6' . '.webp', "xPct" => 25.6, "yPct" => 36.0],
["title" => "대형이중창","pos"=>"right", "page" => "28p", "desc" => "방음 및 풍압 견딤력이 우수한 이중창","pruimg_url" => $skin_url . '/images/1.webp', "img_url" => $skin_url . '/images/7' . '.webp', "xPct" => 36.9, "yPct" => 29.8],
["title" => "스마트 발코니 전용창","pos"=>"right", "page" => "12p", "desc" => "외창 전용 고기밀 샷시","pruimg_url" => $skin_url . '/images/1.webp', "img_url" => $skin_url . '/images/8' . '.webp', "xPct" => 23.0, "yPct" => 37.8],
["title" => "스마트 이중창","pos"=>"right", "page" => "24p", "desc" => "보안이 강화된 자동잠금 이중창","pruimg_url" => $skin_url . '/images/1.webp', "img_url" => $skin_url . '/images/9' . '.webp', "xPct" => 46.7, "yPct" => 22.8],
["title" => "발코니 확장 이중창","pos"=>"right", "page" => "16p", "desc" => "거실 확장용 고단열 이중창","pruimg_url" => $skin_url . '/images/1.webp', "img_url" => $skin_url . '/images/10' . '.webp', "xPct" => 50.4, "yPct" => 20.8],
];
} else {
process_product_positions($db_products, $main_visual_product_data);
}
/**
* 1. 제품 데이터에 위치(pos) 정보 매핑 함수
*/
/**
* 2. 특정 방향(left/right)의 제품 아이템들을 출력하는 함수
*/
function render_product_side($db_products, $side) {
if (empty($db_products)) return;
foreach ($db_products as $item) {
// 지정된 방향의 아이템만 출력
if ($item['pos'] !== $side) continue;
// 링크 속성 준비
$link_attr = (isset($item['link']) && $item['link']) ? ' data-prolink="'.$item['link'].'"' : '';
?>
<div class="product-item"
data-x1="<?= $item['xPct'] ?>"
data-y1="<?= $item['yPct'] ?>"
data-img="<?= $item['pruimg_url'] ?>"
<?= $link_attr ?>>
<div class="product-img">
<img src="<?= $item['img_url'] ?>" alt="<?= htmlspecialchars($item['title']) ?>">
</div>
<div class="product-info">
<h3><?= $item['title'] ?></h3>
<p><?= $item['desc'] ?></p>
</div>
</div>
<?php
}
}
var_dump($db_products);
// 테마 스타일 및 스크립트 로드
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/products.css?ver='.G5_CSS_VER.'">', 0);
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/products2.css?ver='.G5_CSS_VER.'">', 0);
//add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/style.css?ver='.G5_CSS_VER.'">', 0);
add_stylesheet('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />', 0);
add_javascript('<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>', 0);
add_javascript('<script src="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/js/products.js?ver='.G5_CSS_VER.'"></script>', 0);
add_javascript('<script src="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/js/products2.js?ver='.G5_CSS_VER.'"></script>', 0);
include_once(G5_ADMIN_PATH . '/order_manage/components/_expert_visit_popups.php');
?>
<div class="main-container">
<!-- 1. 메인 비주얼 섹션 (클래스명 변경됨) -->
<section class="map-main-visual">
<div class="visual-slider swiper-container">
<div class="swiper-wrapper">
<?php
$main_visual_data = [
['bg' => 'back20.jpg', 'subtitle' => '이끌림으로 품격을 높이다!'],
['bg' => 'back014.jpg', 'subtitle' => '유려하고 모던한 디자인으로<br>공간의 품격을 한단계 높여줍니다.'],
['bg' => 'back012.jpg', 'subtitle' => '다년간의 축적된 노하우와 기술력으로<br>최상의 만족을 드립니다.']
];
foreach ($main_visual_data as $item) {
?>
<div class="swiper-slide" data-thumb-bg="<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>">
<a href="#" class="map-visual-link">
<div class="map-visual-img" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>');"></div>
<div class="map-visual-layer-wrap">
<div class="visual-layer-item">
<h2 class="map-visual-title">PREMIUM DESIGN</h2>
<span class="map-visual-divider"></span>
<p class="map-visual-subtitle"><?php echo $item['subtitle']; ?></p>
</div>
</div>
</a>
</div>
<?php } ?>
</div>
<div class="swiper-pagination"></div>
<!-- 네비게이션 버튼 (클래스명 변경됨) -->
<div class="swiper-button-prev">
<div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
</div>
<div class="swiper-button-next">
<div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
</div>
</div>
</section>
</div>
<div class="product-section">
<div class="product-side left">
<?php for($i=0; $i<$db_products; $i++) { $item = $db_products[$i]; $itemp = $main_visual_product_data[$i]; ?>
<div class="product-item" data-x1="<?= $item['xPct'] ?>" data-y1="<?= $item['yPct'] ?>" data-img="<?= $item['pruimg_url'] ?>" <?php if (isset($item['link']) && $item['link']) { ?> data-prolink="<?= $item['link'] ?>" <?php } ?> >
<!-- <div class="product-item" data-x1="44.8" data-y1="22.9" data-x2="52.7" data-y2="21.7">-->
<div class="product-img"><img src="<?= $item['img_url'] ?>" alt="<?= $item['title'] ?>"></div>
<div class="product-info"><h3><?= $item['title'] ?></h3><p><?= $item['desc'] ?></p></div>
</div>
<?php } ?>
</div>
<div class="product-main">
<img src='<?php echo $skin_url?>/images/main.webp' alt="메인 사진">
<div class="product-hotspot"></div>
</div>
<div class="product-side right">
<?php for($i=5; $i<10; $i++) { $item = $db_products[$i]; ?>
<div class="product-item" data-x1="<?= $item['xPct'] ?>" data-y1="<?= $item['yPct'] ?>" data-img="<?= $item['pruimg_url'] ?>" <?php if (isset($item['link']) && $item['link']) { ?> data-prolink="<?= $item['link'] ?>" <?php } ?>>
<div class="product-img"><img src="<?= $item['img_url'] ?>" alt="<?= $item['title'] ?>"></div>
<div class="product-info"><h3><?= $item['title'] ?></h3><p><?= $item['desc'] ?></p></div>
</div>
<?php } ?>
</div>
</div>
<div class="main-container">
<div class="main-visual">
<section class="min-h-screen flex flex-col items-center justify-center p-6">
<div class="mb-10 text-center">
<h1 class="text-3xl md:text-4xl font-bold text-white mb-3">
고객의 공간을 완성하는 프리미엄 창호 시스템 <span class="highlight_blue">이끌림샤시</span>로 시작하세요
</h1>
<p class="text-gray-300 text-sm md:text-base max-w-2xl mx-auto leading-relaxed">
고객의 생활 공간을 고려한 설계와 정밀한 기술력으로<br>
최고의 품질과 안정적인 A/S를 제공합니다.
</p>
</div>
<section class="product-map-section py-10 bg-[#0b0f1a]">
<div class="mb-10 text-center">
<div class="container mx-auto px-4">
<div class="flex justify-center">
<div class="map-wrapper">
<!-- 기존 map-container 부분을 아래와 같이 수정 -->
<div class="map-container" id="main-map" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash_main/images/main.webp');">
<div id="hotspot-layer">
<?php foreach ($db_products as $index => $p) { ?>
<div class="hotspot"
style="left: <?php echo $p['xPct']; ?>%; top: <?php echo $p['yPct']; ?>%;"
data-index="<?php echo $index; ?>"
title="<?php echo $p['title']; ?>">
</div>
<?php } ?>
</div>
</div>
<div id="coord-display" class="coord-guide">COORD - X: 0.0%, Y: 0.0%</div>
</div>
</div>
</div>
<!-- 그룹 미리보기 팝업 레이어 -->
<div id="hover-preview">
<div class="flex items-center gap-3 mb-5 border-b border-white/10 pb-4">
<i class="fa-solid fa-box-open text-blue-500"></i>
<h2 class="text-white font-bold text-lg">상세 정보</h2>
</div>
<div class="products-grid" id="preview-grid"></div>
</div>
</div>
</section>
<section class="hero_container">
<div class="content_inner">
<!-- <img src="--><?php //echo G5_THEME_URL ?><!--/rb.layout/dnssash/img/main1.png" alt="메인 배경 이미지" class="main_bg_img">-->
<div class="text_area">
<p class="label_blue">SMART WINDOW ORDERING</p>
<h1 class="main_title">
창호의 새로운 기준,<br>
<span class="highlight_blue">이끌림샤시</span>로 시작하세요
</h1>
<p class="sub_description">
복잡한 창호 교체, 이제 온라인 견적으로 투명하게.<br>
고품질 자재와 전문가의 손길을 클릭 한 번으로 만나보세요.
</p>
<!-- 전문가 상담 및 예약 버튼 (상단 오른쪽) -->
<div class="main_action_row">
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=order" class="btn_box white" >
<div class="btn_icon">🏢</div>
<div class="btn_txt">
<strong>창호 온라인 주문</strong>
<p>실시간 직접 견적 및 주문 확정</p>
</div>
</a>
<div class="btn_box white" onclick="openExpertVisitPopup(<?php /*echo $wr_id; */?>)">
<div class="btn_icon">👨‍🔧</div>
<div class="btn_txt">
<strong>창호 전문가 부르기</strong>
<p>방문 실측 및 맞춤 상담 신청</p>
</div>
</div>
</div>
</div>
<div class="floating_as_badge">
<p>전국 대리점망</p>
<strong>A/S 10년 보장</strong>
</div>
</div>
</section>
</section>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const productsData = <?php echo json_encode($db_products); ?>;
if (typeof initProducts === 'function') {
initProducts(productsData);
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
// .map-main-visual 안에 있는 슬라이더만 타겟팅
var mainVisualSwiper = new Swiper('.map-main-visual .visual-slider', {
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function () {
updateNavThumbs(this);
},
slideChangeTransitionEnd: function () {
updateNavThumbs(this);
},
},
});
function updateNavThumbs(swiper) {
// 루프 모드에서 슬라이더의 실제 DOM 요소를 기반으로 이전/다음 슬라이드 찾기
var slides = swiper.slides;
var activeIndex = swiper.activeIndex;
// 이전 슬라이드와 다음 슬라이드 요소 추출
var prevSlide = slides[activeIndex - 1];
var nextSlide = slides[activeIndex + 1];
// 만약 슬라이드가 존재한다면 썸네일 주소 가져오기
var prevThumb = prevSlide ? prevSlide.getAttribute('data-thumb-bg') : '';
var nextThumb = nextSlide ? nextSlide.getAttribute('data-thumb-bg') : '';
// 수정된 클래스명 .map-thumb 을 찾아서 배경 이미지 적용
if (prevThumb) {
var prevTarget = swiper.navigation.prevEl.querySelector('.map-thumb');
if (prevTarget) prevTarget.style.backgroundImage = 'url(' + prevThumb + ')';
}
if (nextThumb) {
var nextTarget = swiper.navigation.nextEl.querySelector('.map-thumb');
if (nextTarget) nextTarget.style.backgroundImage = 'url(' + nextThumb + ')';
}
}
});
</script>
theme/rd.dnssash/rb.layout/dnssash_main/js/products.js
+99
View File
@@ -0,0 +1,99 @@
function initProducts(productsData) {
const preview = document.getElementById('hover-preview');
const previewGrid = document.getElementById('preview-grid');
const hotspotLayer = document.getElementById('hotspot-layer');
const coordDisplay = document.getElementById('coord-display');
const map = document.getElementById('main-map');
let isFixed = false;
const noImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMjIyIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiM0NDQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIiBmb250LWZhbWl5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0Ij5ObyBJbWFnZTwvdGV4dD48L3N2Zz4=";
const groups = {};
productsData.forEach(p => {
const key = `${parseFloat(p.xPct).toFixed(1)}_${parseFloat(p.yPct).toFixed(1)}`;
if (!groups[key]) groups[key] = [];
groups[key].push(p);
});
Object.keys(groups).forEach(key => {
const group = groups[key];
const hs = document.createElement('div');
hs.className = 'hotspot';
hs.style.left = group[0].xPct + '%';
hs.style.top = group[0].yPct + '%';
const updateContent = (showFullContent) => {
const hasContent = group.some(p => p.content && p.content.trim() !== "");
const isSingle = group.length === 1;
if (showFullContent && hasContent) {
previewGrid.className = `products-grid full-html-mode ${isSingle ? 'single-item' : 'multi-items'}`;
previewGrid.innerHTML = group.map(p => {
console.log( p.content)
if (p.content && p.content.trim() !== "") {
const linkAttr = (p.link) ? `onclick="location.href='${p.link}'" style="cursor:pointer;"` : "";
return `<div class="product-item item-vertical" ${linkAttr}>
<div class="editor-content-view">${p.content}</div>
<div class="info-content">
<h4 class="text-white text-[18px] font-bold mb-3">${p.title}</h4>
<p class="text-slate-400 text-[14px] leading-relaxed">${p.desc}</p>
${p.link ? `<div class="text-[11px] text-blue-500 mt-2" onclick="location.href='${p.link}'" style="cursor:pointer;">자세히 보기 ></div>` : ''}
</div>
</div>`;
} else {
const linkAttr = (p.link) ? `onclick="location.href='${p.link}'" style="cursor:pointer;"` : "";
return `<div class="product-item item-vertical" ${linkAttr}>
<div class="product-img-box"><img src="${p.img_url}" onerror="this.onerror=null; this.src='${noImg}';"></div>
<div class="info-content">
<!-- <div class="text-[12px] text-blue-400 font-bold mb-2">${p.page}</div>-->
<h4 class="text-white text-[18px] font-bold mb-3">${p.title}</h4>
<p class="text-slate-400 text-[14px] leading-relaxed">${p.desc}</p>
</div>
</div>`;
}
}).join('<hr class="content-divider">');
} else {
const gridClass = isSingle ? 'single-item' : 'multi-items';
previewGrid.className = `products-grid ${gridClass}`;
previewGrid.innerHTML = group.map(p => {
const linkAttr = (p.link) ? `onclick="location.href='${p.link}'" style="cursor:pointer;"` : "";
return `<div class="product-item item-vertical" ${linkAttr}>
<div class="product-img-box"><img src="${p.img_url}" onerror="this.onerror=null; this.src='${noImg}';"></div>
<div class="info-content">
<!-- <div class="text-[12px] text-blue-400 font-bold mb-2">${p.page}</div>-->
<h4 class="text-white text-[18px] font-bold mb-3">${p.title}</h4>
<p class="text-slate-400 text-[14px] leading-relaxed">${p.desc}</p>
</div>
</div>`;
}).join('');
}
};
hs.onmouseenter = () => { if (!isFixed) { updateContent(false); preview.style.display = 'block'; preview.classList.remove('fixed-mode'); } };
hs.onmouseleave = () => { if (!isFixed) preview.style.display = 'none'; };
hs.onclick = (e) => {
e.stopPropagation();
isFixed = true;
updateContent(true);
preview.classList.add('fixed-mode');
preview.style.display = 'flex';
};
hotspotLayer.appendChild(hs);
});
document.addEventListener('click', (e) => {
if (!preview.contains(e.target)) {
isFixed = false; preview.style.display = 'none'; preview.classList.remove('fixed-mode');
}
});
map.onmousemove = (e) => {
const r = map.getBoundingClientRect();
// coordDisplay.textContent = `X: ${((e.clientX-r.left)/r.width*100).toFixed(1)}%, Y: ${((e.clientY-r.top)/r.height*100).toFixed(1)}%`;
};
map.onclick = (e) => {
const r = map.getBoundingClientRect();
prompt("좌표:", `xPct: ${((e.clientX-r.left)/r.width*100).toFixed(1)}, yPct: ${((e.clientY-r.top)/r.height*100).toFixed(1)}`);
};
}
theme/rd.dnssash/rb.layout/dnssash_main/js/products.js_backup
+56
View File
@@ -0,0 +1,56 @@
function initProducts(productsData) {
const map = document.getElementById('main-map');
const hotspotLayer = document.getElementById('hotspot-layer');
const preview = document.getElementById('hover-preview');
const previewGrid = document.getElementById('preview-grid');
// const coordDisplay = document.getElementById('coord-display');
// 그룹화 로직
const groups = {};
productsData.forEach(p => {
const key = `${parseFloat(p.xPct).toFixed(1)}_${parseFloat(p.yPct).toFixed(1)}`;
if (!groups[key]) groups[key] = [];
groups[key].push(p);
});
Object.keys(groups).forEach(key => {
const group = groups[key];
const hs = document.createElement('div');
hs.className = 'hotspot';
hs.style.left = group[0].xPct + '%';
hs.style.top = group[0].yPct + '%';
hs.style.transform = 'translate(-50%, -50%)';
hs.onmouseenter = () => {
preview.style.display = 'block';
previewGrid.innerHTML = group.map(p => `
<div class="product-item">
<div class="product-img-box"><img src="${p.img_url}" onerror="this.src='https://via.placeholder.com/200x120?text=No+Image'"></div>
<div class="text-[10px] text-blue-400 font-bold mb-1">${p.page}</div>
<h4 class="text-white text-[13px] font-bold truncate">${p.title}</h4>
<p class="text-slate-500 text-[10px] line-clamp-2">${p.desc}</p>
</div>
`).join('');
};
hs.onmouseleave = () => preview.style.display = 'none';
hs.onmousemove = (e) => {
let x = e.clientX + 30;
let y = e.clientY + 30;
if (x + 540 > window.innerWidth) x = e.clientX - 560;
if (y + preview.offsetHeight > window.innerHeight) y = window.innerHeight - preview.offsetHeight - 20;
preview.style.left = x + 'px';
preview.style.top = y + 'px';
};
hotspotLayer.appendChild(hs);
});
// 좌표 도구
// map.onmousemove = (e) => {
// const r = map.getBoundingClientRect();
// coordDisplay.textContent = `X: ${((e.clientX-r.left)/r.width*100).toFixed(1)}%, Y: ${((e.clientY-r.top)/r.height*100).toFixed(1)}%`;
// };
// map.onclick = (e) => {
// const r = map.getBoundingClientRect();
// prompt("좌표:", `xPct: ${((e.clientX-r.left)/r.width*100).toFixed(1)}, yPct: ${((e.clientY-r.top)/r.height*100).toFixed(1)}`);
// };
}
theme/rd.dnssash/rb.layout/dnssash_main/js/products.js_backup_succs
+103
View File
@@ -0,0 +1,103 @@
function initProducts(productsData) {
const map = document.getElementById('main-map');
const hotspotLayer = document.getElementById('hotspot-layer');
const preview = document.getElementById('hover-preview');
const previewGrid = document.getElementById('preview-grid');
// const coordDisplay = document.getElementById('coord-display');
let isFixed = false; // 팝업 고정 상태 변수
const groups = {};
productsData.forEach(p => {
const key = `${parseFloat(p.x_pct || p.xPct).toFixed(1)}_${parseFloat(p.y_pct || p.yPct).toFixed(1)}`;
if (!groups[key]) groups[key] = [];
groups[key].push(p);
});
Object.keys(groups).forEach(key => {
const group = groups[key];
const hs = document.createElement('div');
hs.className = 'hotspot';
hs.style.left = (group[0].x_pct || group[0].xPct) + '%';
hs.style.top = (group[0].y_pct || group[0].yPct) + '%';
hs.style.transform = 'translate(-50%, -50%)';
// 팝업 내용 생성 함수
const updateContent = () => {
const gridClass = group.length === 1 ? 'single-item' : 'multi-items';
previewGrid.className = `products-grid ${gridClass}`;
previewGrid.innerHTML = group.map(p => `
<div class="product-item">
<div class="product-img-box"><img src="${p.img_url}" onerror="this.src='https://via.placeholder.com/200x120?text=No+Image'"></div>
<div class="info-content">
<div class="text-[11px] text-blue-400 font-bold mb-1">${p.page}</div>
<h4 class="text-white text-[16px] font-bold mb-2">${p.title}</h4>
<p class="text-slate-400 text-[13px] leading-relaxed">${p.desc}</p>
</div>
</div>
`).join('');
};
// 마우스 진입 (호버 시작)
hs.onmouseenter = (e) => {
if (isFixed) return;
updateContent();
preview.style.display = 'block';
};
// 마우스 이동 (팝업이 마우스를 따라다님)
hs.onmousemove = (e) => {
if (isFixed) return;
let x = e.clientX + 20;
let y = e.clientY - (preview.offsetHeight / 2);
if (x + 560 > window.innerWidth) x = e.clientX - 580;
if (y < 20) y = 20;
preview.style.left = x + 'px';
preview.style.top = y + 'px';
};
// 마우스 이탈 (호버 종료)
hs.onmouseleave = () => {
if (isFixed) return;
preview.style.display = 'none';
};
// 클릭 시 고정
hs.onclick = (e) => {
e.stopPropagation();
isFixed = true;
updateContent();
preview.style.display = 'block';
// 고정 시에는 화면 중앙 근처 적절한 위치에 배치
let x = e.clientX + 30;
let y = e.clientY - (preview.offsetHeight / 2);
if (x + 720 > window.innerWidth) x = e.clientX - 730;
if (y < 20) y = 20;
preview.style.left = x + 'px';
preview.style.top = y + 'px';
preview.classList.add('fixed-mode');
};
hotspotLayer.appendChild(hs);
});
// 외부 클릭 시 고정 해제 및 닫기
document.addEventListener('click', (e) => {
if (!preview.contains(e.target)) {
isFixed = false;
preview.style.display = 'none';
preview.classList.remove('fixed-mode');
}
});
// // 좌표 도구
// map.onmousemove = (e) => {
// const r = map.getBoundingClientRect();
// coordDisplay.textContent = `X: ${((e.clientX-r.left)/r.width*100).toFixed(1)}%, Y: ${((e.clientY-r.top)/r.height*100).toFixed(1)}%`;
// };
// map.onclick = (e) => {
// const r = map.getBoundingClientRect();
// prompt("좌표:", `xPct: ${((e.clientX-r.left)/r.width*100).toFixed(1)}, yPct: ${((e.clientY-r.top)/r.height*100).toFixed(1)}`);
// };
}
theme/rd.dnssash/rb.layout/dnssash_main/js/products2.js
+162
View File
@@ -0,0 +1,162 @@
/**
* [최종 통합본] 제품 사이드 메뉴 및 메인 맵 연동 모듈 (products2.js)
* 1: 중앙팝업, 2: 점선연결, 3: 제자리확대, 4: 1초 지연 후 중앙팝업
*/
(function() {
// 💡 설정: 원하는 모드 번호를 입력하세요.
const POPUP_MODE = 4;
let popupTimer = null; // 4번 모드용 타이머
// 모든 효과와 타이머를 제거하는 청소기 함수
function clearAllPopups() {
// 실행 중인 타이머가 있으면 취소
if (popupTimer) {
clearTimeout(popupTimer);
popupTimer = null;
}
// 핫스팟 숨김
const hotspot = document.querySelector('.product-hotspot');
if (hotspot) hotspot.style.display = 'none';
// 생성된 클론 이미지(모드 1, 4) 삭제
const clones = document.querySelectorAll('#active-popup-img');
clones.forEach(c => c.remove());
// 모든 아이템의 클래스 및 스타일 초기화
const items = document.querySelectorAll('.product-item');
items.forEach(item => {
item.classList.remove('show-connector', 'active');
const img = item.querySelector('.product-img img');
if (img) {
img.classList.remove('mode-self-zoom');
img.style.transform = '';
}
});
}
function initProductEvents() {
const productItems = document.querySelectorAll('.product-section .product-item');
const mainArea = document.querySelector('.product-main');
const section = document.querySelector('.product-section');
if (!productItems.length || !mainArea) return;
productItems.forEach(item => {
const imgElement = item.querySelector('.product-img img');
const imgSrc = item.dataset.img || (imgElement ? imgElement.src : '');
const proLink = item.dataset.prolink;
item.addEventListener('mouseenter', function() {
clearAllPopups(); // 새로 시작하기 전 초기화
const x1 = this.dataset.x1;
const y1 = this.dataset.y1;
if (x1 && y1) {
// 1. 핫스팟(블루 스폿)은 어떤 모드든 즉시 표시
const hotspot = document.querySelector('.product-hotspot');
if (hotspot) {
hotspot.style.left = x1 + '%';
hotspot.style.top = y1 + '%';
hotspot.style.display = 'block';
}
// 2. 모드별 효과 실행
if (POPUP_MODE === 4) {
// [모드 4] 1초 지연 후 중앙 팝업
popupTimer = setTimeout(() => {
if (imgElement) {
const clone = imgElement.cloneNode(true);
clone.id = 'active-popup-img';
clone.src = imgSrc;
if (proLink) {
clone.style.cursor = 'pointer';
clone.style.pointerEvents = 'auto';
clone.onclick = () => { location.href = proLink; };
}
mainArea.appendChild(clone);
requestAnimationFrame(() => clone.classList.add('active'));
}
}, 1000); // 1000ms = 1초 대기
} else if (POPUP_MODE === 1 && imgElement) {
// [모드 1] 즉시 중앙 팝업
const clone = imgElement.cloneNode(true);
clone.id = 'active-popup-img';
clone.src = imgSrc;
if (proLink) {
clone.style.cursor = 'pointer';
clone.style.pointerEvents = 'auto';
clone.onclick = () => { location.href = proLink; };
}
mainArea.appendChild(clone);
requestAnimationFrame(() => clone.classList.add('active'));
} else if (POPUP_MODE === 2) {
// [모드 2] 점선 연결선 정밀 계산
const rect = this.getBoundingClientRect();
const mainRect = mainArea.getBoundingClientRect();
const targetX = mainRect.left + (mainRect.width * (parseFloat(x1) / 100));
const targetY = mainRect.top + (mainRect.height * (parseFloat(y1) / 100));
const isLeft = this.closest('.product-side').classList.contains('left');
const startX = isLeft ? rect.right : rect.left;
const startY = rect.top + (rect.height / 2);
const dx = targetX - startX;
const dy = targetY - startY;
const dist = Math.sqrt(dx * dx + dy * dy);
let angle = Math.atan2(dy, dx) * 180 / Math.PI;
if (!isLeft) angle += 180;
this.style.setProperty('--line-width', dist + 'px');
this.style.setProperty('--line-angle', angle + 'deg');
this.classList.add('show-connector');
requestAnimationFrame(() => this.classList.add('active'));
if (imgElement) imgElement.style.transform = 'scale(1.2)';
if (imgElement && proLink) {
imgElement.style.cursor = 'pointer';
imgElement.onclick = () => { location.href = proLink; };
}
} else if (POPUP_MODE === 3 && imgElement) {
// [모드 3] 제자리 600 확대
imgElement.src = imgSrc;
imgElement.classList.add('mode-self-zoom');
if (proLink) {
imgElement.style.cursor = 'pointer';
imgElement.style.pointerEvents = 'auto';
imgElement.onclick = () => { location.href = proLink; };
}
}
}
});
// 아이템 자체 클릭 시에도 이동 (이미지 외 영역 클릭 대비)
if (proLink) {
item.style.cursor = 'pointer';
item.addEventListener('click', function(e) {
if (e.target.tagName !== 'IMG') {
location.href = proLink;
}
});
}
// 마우스가 아이템을 벗어나면 즉시 청소 (타이머 취소 포함)
item.addEventListener('mouseleave', clearAllPopups);
});
// 섹션 전체를 벗어나도 청소 (안전장치)
if (section) {
section.addEventListener('mouseleave', clearAllPopups);
}
}
// 문서 로드 완료 시 실행
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initProductEvents);
} else {
initProductEvents();
}
})();
theme/rd.dnssash/rb.layout/dnssash_main/js/products2_잘된다.js
+64
View File
@@ -0,0 +1,64 @@
function initProductEvents() {
// 💡 설정: 1(메인중앙), 2(점선), 3(제자리확대)
const POPUP_MODE = 1;
const productItems = document.querySelectorAll('.product-section .product-item');
const mainArea = document.querySelector('.product-main');
if (!productItems.length) return;
productItems.forEach(item => {
// 💡 [수정] 데이터 속성에서 이미지 경로 직접 읽기 (없으면 내부 img 사용)
const imgSrc = item.dataset.img || item.querySelector('.product-img img').src;
const imgElement = item.querySelector('.product-img img');
item.addEventListener('mouseenter', function() {
clearAllPopups();
const x1 = this.dataset.x1;
const y1 = this.dataset.y1;
if (x1 && y1) {
ProductModule.setHotspot(x1, y1);
if (POPUP_MODE === 1 && mainArea) {
// [모드 1] 메인 중앙 복제 팝업
const clone = document.createElement('img');
clone.src = imgSrc; // 💡 전달받은 경로로 로드
clone.id = 'active-popup-img';
mainArea.appendChild(clone);
requestAnimationFrame(() => clone.classList.add('active'));
} else if (POPUP_MODE === 2) {
// [모드 2] 점선 연결 (기존 로직 동일)
const rect = this.getBoundingClientRect();
const mainRect = mainArea.getBoundingClientRect();
const targetX = mainRect.left + (mainRect.width * (parseFloat(x1) / 100));
const targetY = mainRect.top + (mainRect.height * (parseFloat(y1) / 100));
const isLeft = this.closest('.product-side').classList.contains('left');
const startX = isLeft ? rect.right : rect.left;
const dx = targetX - startX;
const dy = targetY - (rect.top + rect.height/2);
let angle = Math.atan2(dy, dx) * 180 / Math.PI;
if (!isLeft) angle += 180;
this.style.setProperty('--line-width', Math.sqrt(dx*dx + dy*dy) + 'px');
this.style.setProperty('--line-angle', angle + 'deg');
this.classList.add('show-connector');
requestAnimationFrame(() => this.classList.add('active'));
} else if (POPUP_MODE === 3) {
// 💡 [모드 3] 제자리 400x400 확대
if (imgElement) {
imgElement.src = imgSrc; // 💡 이미지 경로 갱신
imgElement.classList.add('mode-self-zoom');
}
}
}
});
item.addEventListener('mouseleave', function() {
clearAllPopups();
if (imgElement) imgElement.classList.remove('mode-self-zoom');
});
});
}
theme/rd.dnssash/rb.layout/dnssash_main/js/products_backup0601.js
+99
View File
@@ -0,0 +1,99 @@
function initProducts(productsData) {
const map = document.getElementById('main-map');
const hotspotLayer = document.getElementById('hotspot-layer');
const preview = document.getElementById('hover-preview');
const previewGrid = document.getElementById('preview-grid');
let isFixed = false;
const noImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMjIyIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiM0NDQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIiBmb250LWZhbWl5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0Ij5ObyBJbWFnZTwvdGV4dD48L3N2Zz4=";
// 1. 그룹화 로직
const groups = {};
productsData.forEach(p => {
const key = `${parseFloat(p.xPct).toFixed(1)}_${parseFloat(p.yPct).toFixed(1)}`;
if (!groups[key]) groups[key] = [];
groups[key].push(p);
});
// 2. 핫스팟 생성 및 이벤트
Object.keys(groups).forEach(key => {
const group = groups[key];
const hs = document.createElement('div');
hs.className = 'hotspot';
hs.style.left = group[0].xPct + '%';
hs.style.top = group[0].yPct + '%';
hs.style.transform = 'translate(-50%, -50%)';
const updateContent = (showFullContent) => {
const hasContent = group.some(p => p.content && p.content.trim() !== "");
const isSingle = group.length === 1;
if (showFullContent && hasContent) {
// 클릭 시: 상세 HTML 모드
previewGrid.className = `products-grid full-html-mode ${isSingle ? 'single-item' : 'multi-items'}`;
previewGrid.innerHTML = group.map(p => {
if (p.content && p.content.trim() !== "") {
return `<div class="editor-content-view">${p.content}</div>`;
} else {
const linkAttr = (p.link) ? `onclick="location.href='${p.link}'" style="cursor:pointer;"` : "";
return `<div class="product-item" ${linkAttr}>
<div class="product-img-box"><img src="${p.img_url}" onerror="this.onerror=null; this.src='${noImg}';"></div>
<div class="info-content">
<div class="text-[12px] text-blue-400 font-bold mb-2">${p.page}</div>
<h4 class="text-white text-[18px] font-bold mb-3">${p.title}</h4>
<p class="text-slate-400 text-[14px] leading-relaxed">${p.desc}</p>
${p.link ? '<div class="text-[11px] text-blue-500 mt-2">자세히 보기 ></div>' : ''}
</div>
</div>`;
}
}).join('<hr class="content-divider">');
} else {
// 호버 시: 요약 모드
const gridClass = isSingle ? 'single-item' : 'multi-items';
previewGrid.className = `products-grid ${gridClass}`;
previewGrid.innerHTML = group.map(p => {
const linkAttr = (p.link) ? `onclick="location.href='${p.link}'" style="cursor:pointer;"` : "";
return `<div class="product-item" ${linkAttr}>
<div class="product-img-box"><img src="${p.img_url}" onerror="this.onerror=null; this.src='${noImg}';"></div>
<div class="info-content">
<div class="text-[12px] text-blue-400 font-bold mb-2">${p.page}</div>
<h4 class="text-white text-[18px] font-bold mb-3">${p.title}</h4>
<p class="text-slate-400 text-[14px] leading-relaxed">${p.desc}</p>
</div>
</div>`;
}).join('');
}
};
hs.onmouseenter = () => {
if (isFixed) return;
updateContent(false);
preview.style.display = 'block';
preview.classList.remove('fixed-mode');
};
hs.onmouseleave = () => {
if (isFixed) return;
preview.style.display = 'none';
};
hs.onclick = (e) => {
e.stopPropagation();
isFixed = true;
updateContent(true);
preview.classList.add('fixed-mode');
preview.style.display = 'flex';
};
hotspotLayer.appendChild(hs);
});
// 외부 클릭 시 닫기
document.addEventListener('click', (e) => {
if (!preview.contains(e.target)) {
isFixed = false;
preview.style.display = 'none';
preview.classList.remove('fixed-mode');
}
});
}