hmw1001
197 lines
12 KiB
PHP
197 lines
12 KiB
PHP
<?php
|
|
include_once('./_common.php');
|
|
|
|
// 페이지 제목 설정
|
|
$g5['title'] = '시공견적 안내';
|
|
|
|
// 헤더 파일 포함
|
|
include_once(G5_PATH.'/head.php');
|
|
?>
|
|
|
|
<!-- for mobile -->
|
|
<div id="menu" class="mobile-navigation">
|
|
<div class="home"><a href="/"><img src="/theme/rd.lwd/img/sub/common/logo.png" alt="하이창호"></a></div>
|
|
<nav class="nav-menu"></nav>
|
|
<a href="javascript:void(0);" class="close">닫기</a>
|
|
</div>
|
|
<div class="mobile-overlay"></div>
|
|
|
|
<div class="sub-visual bg2">
|
|
<div class="inner">
|
|
<h2>Hi 고객스토리</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lnb-wrap">
|
|
<div class="lnb">
|
|
<div class="swiper-container">
|
|
<ul class="swiper-wrapper">
|
|
<li class="swiper-slide"><a href="/sub02.php">창호견적</a></li>
|
|
<li class="swiper-slide active"><a href="/sub02_1.php">시공견적</a></li>
|
|
<li class="swiper-slide"><a href="/sub02_2.php">창호소비효율등급제</a></li>
|
|
<li class="swiper-slide"><a href="/sub02_3.php">창호리모델링시대</a></li>
|
|
<li class="swiper-slide"><a href="/sub02_4.php">고객이 알아야 할 창호시공 10선</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="container">
|
|
<div id="contArea">
|
|
<div class="sub-title">
|
|
<h2>시공견적 페이지</h2>
|
|
</div>
|
|
|
|
<div class="real-cont">
|
|
<!--// content -->
|
|
<div class="greetings">
|
|
<style>
|
|
/* 페이지 전용 스타일 */
|
|
.estimate-guide-content h3.doc-tit { font-size: 22px; color: #003300; margin-bottom: 20px; }
|
|
.estimate-guide-content p { margin-bottom: 15px; color: #555; line-height: 1.8; }
|
|
.variable-list { list-style: none; padding-left: 20px; margin-bottom: 20px; }
|
|
.variable-list li { position: relative; margin-bottom: 10px; padding-left: 5px; }
|
|
.variable-list li:before { content: '✓'; position: absolute; left: -20px; color: #3d6cb9; font-weight: bold; }
|
|
.important-notice { background-color: #fffbe6; border: 1px solid #ffe58f; border-radius: 8px; padding: 15px 20px; color: #8a6d3b; margin-top: 20px; }
|
|
.important-notice i { margin-right: 10px; }
|
|
.cost-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 15px; }
|
|
.cost-table th, .cost-table td { border: 1px solid #ddd; padding: 12px; text-align: left; }
|
|
.cost-table th { background-color: #f9f9f9; font-weight: bold; }
|
|
.cost-table td:last-child { text-align: right; font-family: 'Malgun Gothic', sans-serif; }
|
|
.calculator-box { background-color: #f5faff; border: 1px solid #d6eaff; border-radius: 8px; padding: 25px; margin-top: 20px; }
|
|
.calculator-box .input-group { display: flex; align-items: center; margin-bottom: 15px; }
|
|
.calculator-box label { width: 100px; font-weight: bold; }
|
|
.calculator-box input[type="number"] { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
|
|
.calculator-box button { display: block; width: 100%; padding: 12px; background-color: #3d6cb9; color: white; border: none; border-radius: 4px; font-size: 18px; cursor: pointer; transition: background-color 0.2s; }
|
|
.calculator-box button:hover { background-color: #2c5282; }
|
|
#result-display { margin-top: 20px; padding: 15px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; font-size: 18px; text-align: center; }
|
|
#result-display span { font-weight: bold; color: #d9534f; }
|
|
|
|
@media screen and (max-width:992px){
|
|
.row { display: flex; flex-wrap: wrap; margin: 0 auto; width: 100%; flex-direction: column; }
|
|
}
|
|
</style>
|
|
|
|
<div class="content estimate-guide-content">
|
|
<h3 class="doc-tit"><font color="#003300">창호 시공비 안내</font></h3>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<p>
|
|
고객님이 시공을 의뢰할 경우 참고하는 ‘시공견적페이지’입니다. 이곳에서는 창호 시공 진행과정에 따른 금액 변동을 알 수 있습니다.
|
|
</p>
|
|
<p>
|
|
창호 시공 금액이 변동될 수 있는 항목들을 확인하시고 항목들에 따라서 추가되는 금액을 확인하신 후 ‘창호전문상담가’가 추후에 방문해 다시 자세하게 설명해 드립니다.
|
|
</p>
|
|
<p>
|
|
이곳에서는 창호 틀당 고객님이 직접 시공비를 산출하실 수도 있습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div style="height: 1px; background-color: #eee; margin-bottom: 30px; margin-top: 10px;"></div>
|
|
|
|
<h3 class="doc-tit"><font color="#003300">창호 시공 시 현장 변동 항목</font></h3>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<p>
|
|
아래는 창호 시공 시 현장 상황에 따라 시공비가 달라질 수 있는 주요 항목들입니다.
|
|
</p>
|
|
<ul class="variable-list">
|
|
<li>층고에 따른 사다리차 가능 유무 (윈치 작업)</li>
|
|
<li>하부타일 마감</li>
|
|
<li>베란다 확장</li>
|
|
<li>상부장 탈부착 (씽크대)</li>
|
|
<li>하리(구조물) 절단</li>
|
|
<li>엘리베이터 사용 여부</li>
|
|
</ul>
|
|
<p class="important-notice">
|
|
<i class="fa fa-exclamation-triangle"></i>
|
|
위의 현장 상황에 따라서 시공비 편차가 많이 발생할 수 있기 때문에, 실제 시공 시에는 <strong>창호전문상담가의 방문을 원칙</strong>으로 하고 있습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div style="height: 1px; background-color: #eee; margin-bottom: 30px; margin-top: 10px;"></div>
|
|
|
|
<h3 class="doc-tit"><font color="#003300">주요 추가 비용 항목 (예시)</font></h3>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<table class="cost-table">
|
|
<thead>
|
|
<tr>
|
|
<th>항목</th>
|
|
<th>비용 (VAT 별도)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>스카이 장비</td><td>600,000원</td></tr>
|
|
<tr><td>사다리차</td><td>300,000원</td></tr>
|
|
<tr><td>윈치</td><td>300,000원</td></tr>
|
|
<tr><td>하부타일 마감</td><td>100,000원</td></tr>
|
|
<tr><td>몰딩 마감</td><td>100,000원</td></tr>
|
|
<tr><td>철거비 (기본 6틀)</td><td>450,000원</td></tr>
|
|
<tr><td>추가 철거 (틀당)</td><td>30,000원</td></tr>
|
|
<tr><td>보양 작업비</td><td>150,000원</td></tr>
|
|
<tr><td>싱크대 상부장 탈부착</td><td>100,000원</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div style="height: 1px; background-color: #eee; margin-bottom: 30px; margin-top: 10px;"></div>
|
|
|
|
<h3 class="doc-tit"><font color="#003300">창당 시공 단가 간편 산출기</font></h3>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<p>창호의 가로, 세로 사이즈를 입력하여 대략적인 시공 단가를 계산해볼 수 있습니다. (정확한 금액은 전문가 상담이 필요합니다.)</p>
|
|
<div class="calculator-box">
|
|
<div class="input-group">
|
|
<label for="width-input">가로 (mm)</label>
|
|
<input type="number" id="width-input" placeholder="예: 1800">
|
|
</div>
|
|
<div class="input-group">
|
|
<label for="height-input">세로 (mm)</label>
|
|
<input type="number" id="height-input" placeholder="예: 2100">
|
|
</div>
|
|
<button id="calculate-btn">계산하기</button>
|
|
<div id="result-display">
|
|
예상 시공 단가: <span>계산 버튼을 눌러주세요.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- content //-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const calculateBtn = document.getElementById('calculate-btn');
|
|
const widthInput = document.getElementById('width-input');
|
|
const heightInput = document.getElementById('height-input');
|
|
const resultSpan = document.querySelector('#result-display span');
|
|
|
|
calculateBtn.addEventListener('click', function() {
|
|
const width = parseFloat(widthInput.value);
|
|
const height = parseFloat(heightInput.value);
|
|
|
|
if (isNaN(width) || isNaN(height) || width <= 0 || height <= 0) {
|
|
alert('올바른 가로, 세로 값을 mm 단위로 입력해주세요.');
|
|
resultSpan.textContent = '계산 오류';
|
|
return;
|
|
}
|
|
|
|
// 공식: (가로(mm) * 세로(mm) / 1,000,000) * 90,000원
|
|
const areaInM2 = (width * height) / 1000000;
|
|
const pricePerM2 = 90000;
|
|
const estimatedCost = Math.round(areaInM2 * pricePerM2);
|
|
|
|
resultSpan.textContent = estimatedCost.toLocaleString('ko-KR') + ' 원';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<?php
|
|
// 푸터 파일 포함
|
|
include_once(G5_PATH.'/tail.php');
|
|
?>
|