211 lines
9.3 KiB
PHP
211 lines
9.3 KiB
PHP
<?php
|
|
require_once __DIR__ . '/../bbs/env.php';
|
|
kngil_start_session();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<?php include __DIR__ . "/_head.php"; ?>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<?php include __DIR__ . "/_header.php"; ?>
|
|
|
|
<!-- container -->
|
|
<div class="container results">
|
|
<section class="sub-header">
|
|
<div class="page-title js-dark">
|
|
<h2 data-aos="fade-down" data-aos-duration="1000">성과품</h2>
|
|
<p class="sub-txt">
|
|
<span class="txt-line">데이터 분석 결과를 기반으로 항목별 성과품을</span>
|
|
<span class="txt-line">자동생성된 보고서 형태로 제공합니다.</span>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Content Section -->
|
|
<section class="sub-content">
|
|
<div class="sub-tit-box">
|
|
<h3 class="sub-tit">
|
|
<span class="txt-line">사업대상지역의 <strong>환경·사회·사업비 요소를 분석 및 시각화</strong>하여,</span>
|
|
<span class="txt-line">항목별 최적화된 보고서 형태로 제공</span>
|
|
</h3>
|
|
</div>
|
|
<div class="condition">
|
|
<div class="diagram-wrap" data-aos="fade-up" data-aos-duration="1000" aria-label="성과품 다이어그램">
|
|
<div class="dia-circles-wrap">
|
|
<div class="circle-dash" aria-hidden="true"></div>
|
|
<div class="circle-belt" aria-hidden="true"></div>
|
|
<div class="circle-core">
|
|
<span>고품질의</span>
|
|
<span>성과품</span>
|
|
</div>
|
|
<div class="circle-dots move" aria-hidden="true">
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
</div>
|
|
<div class="circle-dots" aria-hidden="true">
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
</div>
|
|
<div class="dia-element-ring" aria-label="데이터 항목 링">
|
|
<?php
|
|
$diaItems = [
|
|
["angle" => "0deg", "pos" => "1", "label" => "토지"],
|
|
["angle" => "60deg", "pos" => "2", "label" => "인구"],
|
|
["angle" => "120deg", "pos" => "3", "label" => "기반시설"],
|
|
["angle" => "180deg", "pos" => "4", "label" => "도시&주거"],
|
|
["angle" => "240deg", "pos" => "5", "label" => "생태&자연"],
|
|
["angle" => "300deg", "pos" => "6", "label" => "기상"]
|
|
];
|
|
foreach ($diaItems as $item): ?>
|
|
<div class="dia-element dia-pos-<?=$item['pos']?>" style="--angle: <?=$item['angle']?>">
|
|
<span class="dia-tit"><i></i><em><?=$item['label']?></em></span>
|
|
<div class="dot"></div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Category Tabs Section: 자연조건 / 사회특성 / 추정사업비 -->
|
|
<section class="sub-category" aria-label="성과품 카테고리">
|
|
<div class="results-wrap">
|
|
<nav aria-label="데이터 카테고리 네비게이션">
|
|
<ul class="tab-list" role="tablist" aria-label="데이터 카테고리 목록">
|
|
<li class="on">
|
|
<a
|
|
href="#key-natural"
|
|
role="tab"
|
|
aria-selected="true"
|
|
aria-controls="key-natural"
|
|
tabindex="0"
|
|
>
|
|
<i class="ico-nature" aria-hidden="true"></i>
|
|
자연조건 데이터
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#key-social"
|
|
role="tab"
|
|
aria-selected="false"
|
|
aria-controls="key-social"
|
|
tabindex="-1"
|
|
>
|
|
<i class="ico-social" aria-hidden="true"></i>
|
|
사회특성 데이터
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#key-cost"
|
|
role="tab"
|
|
aria-selected="false"
|
|
aria-controls="key-cost"
|
|
tabindex="-1"
|
|
>
|
|
<i class="ico-cost" aria-hidden="true"></i>
|
|
추정사업비 데이터
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="tab-panels" role="tabpanel">
|
|
<?php
|
|
function renderTabPanel($data) {
|
|
?>
|
|
<div id="<?=$data['id']?>" class="tab-content <?=$data['tabClass']?><?=$data['isActive']?>" role="tabpanel" aria-labelledby="<?=$data['titleId']?>">
|
|
<div class="section-hero">
|
|
<div class="section-hero-left">
|
|
<h3 id="<?=$data['titleId']?>" class="section-title-large">
|
|
<span class="watermark" aria-hidden="true">Excel</span>
|
|
<?=$data['title']?>
|
|
</h3>
|
|
<p class="section-desc"><?=$data['desc']?></p>
|
|
</div>
|
|
<div class="section-hero-right">
|
|
<div class="report-stack">
|
|
<div class="report-page" style="--index: 0">
|
|
<span class="report-pick" aria-hidden="true"></span>
|
|
<img src="/kngil/img/results/imb_report_<?=$data['imgPrefix']?>_1.png" alt="<?=$data['alt1']?>">
|
|
</div>
|
|
<div class="report-page" style="--index: 1"><img src="/kngil/img/results/imb_report_<?=$data['imgPrefix']?>_2.png" alt="<?=$data['alt2']?>"></div>
|
|
<div class="report-page" style="--index: 2"><img src="/kngil/img/results/imb_report_<?=$data['imgPrefix']?>_3.png" alt="<?=$data['alt3']?>"></div>
|
|
<div class="report-page" style="--index: 3"><img src="/kngil/img/results/imb_report_<?=$data['imgPrefix']?>_4.png" alt="<?=$data['alt4']?>"></div>
|
|
<div class="report-page" style="--index: 4"><img src="/kngil/img/results/imb_report_<?=$data['imgPrefix']?>_5.png" alt="<?=$data['alt5']?>"></div>
|
|
<div class="report-page" style="--index: 5"><img src="/kngil/img/results/imb_report_<?=$data['imgPrefix']?>_6.png" alt="<?=$data['alt6']?>"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
}
|
|
|
|
renderTabPanel([
|
|
"id" => "key-natural",
|
|
"tabClass" => "natural",
|
|
"isActive" => " on",
|
|
"title" => "자연조건 데이터",
|
|
"titleId" => "title-natural",
|
|
"desc" => "지역의 개황, 기상 및 자연재해,<br>생태 및 자연환경, 도시 및 주거환경<br>관련 데이터를 제공합니다.",
|
|
"imgPrefix" => "natural",
|
|
"alt1" => "지역의 개황",
|
|
"alt2" => "기상 및 자연재해",
|
|
"alt3" => "지역의 개황",
|
|
"alt4" => "기상 및 자연재해",
|
|
"alt5" => "생태 및 자연환경",
|
|
"alt6" => "도시 및 주거환경"
|
|
]);
|
|
|
|
renderTabPanel([
|
|
"id" => "key-social",
|
|
"tabClass" => "social",
|
|
"isActive" => "",
|
|
"title" => "사회특성 데이터",
|
|
"titleId" => "title-social",
|
|
"desc" => "인구, 토지, 건축물, 사회기반시설 관련<br>데이터를 제공합니다.",
|
|
"imgPrefix" => "social",
|
|
"alt1" => "지역의 개황",
|
|
"alt2" => "기상 및 자연재해",
|
|
"alt3" => "지역의 개황",
|
|
"alt4" => "기상 및 자연재해",
|
|
"alt5" => "생태 및 자연환경",
|
|
"alt6" => "도시 및 주거환경"
|
|
]);
|
|
|
|
renderTabPanel([
|
|
"id" => "key-cost",
|
|
"tabClass" => "cost",
|
|
"isActive" => "",
|
|
"title" => "추정사업비 데이터",
|
|
"titleId" => "title-cost",
|
|
"desc" => "산정기준, 총사업비, 보상비,<br>공사비, 설계비, 부대비<br>관련 데이터를 제공합니다.",
|
|
"imgPrefix" => "cost",
|
|
"alt1" => "지역의 개황",
|
|
"alt2" => "기상 및 자연재해",
|
|
"alt3" => "지역의 개황",
|
|
"alt4" => "기상 및 자연재해",
|
|
"alt5" => "생태 및 자연환경",
|
|
"alt6" => "도시 및 주거환경"
|
|
]);
|
|
?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- // Main Container -->
|
|
|
|
<?php include __DIR__ . "/_footer.php"; ?>
|
|
</div>
|
|
|
|
<script src="/kngil/js/results.js"></script>
|
|
</body>
|
|
</html>
|