hmw1001
370 lines
20 KiB
PHP
370 lines
20 KiB
PHP
<?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>
|