450 lines
22 KiB
PHP
Executable File
450 lines
22 KiB
PHP
Executable File
<!doctype html>
|
|
<!--[if lt IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="kr"><![endif]-->
|
|
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="kr"><![endif]-->
|
|
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie10 lt-ie9" lang="kr"><![endif]-->
|
|
<!--[if (IE 9)&!(IEMobile)]><html class="no-js lt-ie10" lang="kr"><![endif]-->
|
|
<!--[if gt IE 9]><!-->
|
|
<html class="no-js" lang="kr">
|
|
<!--<![endif]-->
|
|
|
|
<head>
|
|
<?php $this->load->view('templates/grace/grace-head-meta') ?>
|
|
<?php $this->load->view('templates/grace/grace-head') ?>
|
|
</head>
|
|
|
|
<body class="grace">
|
|
<?php $this->load->view('templates/grace/grace-header', ['nav' => preg_replace('/^<[^>]+>|<\/[^>]+>$/', '', hooskNav('grace'))]) ?>
|
|
|
|
<main id="main" role="main" tabindex="-1">
|
|
<!--main Slide-->
|
|
<div class="recommend_card_wrap">
|
|
<div id="card_flick" class="recommend_card_area">
|
|
<div class="flick-container" style="overflow: hidden; box-sizing: border-box;">
|
|
<div class="eg-flick-container"
|
|
style="position: relative; z-index: 2000; width: 3868px; height: 100%; transform: translate(-967px); will-change: transform;">
|
|
|
|
<div class="flick-ct eg-flick-panel is_disable" role="tabpanel" aria-hidden="true"
|
|
style="width: 967px; height: 100%; box-sizing: border-box; top: 0px; left: 0px; transform: translate(200%); will-change: transform; position: relative;">
|
|
<div class="cont_area as_post"
|
|
style="background-image:url(<?php echo getImageUrl($featured[0]->img) ?>)">
|
|
<a href="<?php echo $featured[0]->articleURL ?>" class="inner"
|
|
onclick="mug.common.nclick(this, 'bes.banner1');">
|
|
<span class="card_dim"></span>
|
|
<span class="cont_type"><?php echo $featured[0]->pageTitle ?></span>
|
|
<strong class="tit"><?php echo $featured[0]->postTitle ?></strong>
|
|
<span class="writer"><?php echo $featured[0]->userName ?></span>
|
|
</a>
|
|
</div>
|
|
<div class="img_dim"></div>
|
|
</div>
|
|
|
|
<div class="flick-ct eg-flick-panel is_disable" role="tabpanel" aria-hidden="true"
|
|
style="position: absolute; width: 967px; height: 100%; box-sizing: border-box; top: 0px; left: 0px; transform: translate(300%); will-change: transform;">
|
|
<div class="cont_area as_series"
|
|
style="background-image:url(<?php echo getImageUrl($featured[1]->img) ?>)">
|
|
<a href="<?php echo $featured[1]->articleURL ?>" class="inner"
|
|
onclick="mug.common.nclick(this, 'bes.banner2');">
|
|
<span class="card_dim"></span>
|
|
<span class="cont_type"><?php echo $featured[1]->pageTitle ?></span>
|
|
<strong class="tit"><?php echo $featured[1]->postTitle ?></strong>
|
|
<span class="writer"><?php echo $featured[1]->userName ?></span>
|
|
</a>
|
|
</div>
|
|
<div class="img_dim"></div>
|
|
</div>
|
|
|
|
<div class="flick-ct eg-flick-panel is_disable" role="tabpanel" aria-hidden="true"
|
|
style="position: absolute; width: 967px; height: 100%; box-sizing: border-box; top: 0px; left: 0px; transform: translate(0%); will-change: transform;">
|
|
<div class="cont_area as_post"
|
|
style="background-image:url(<?php echo getImageUrl($featured[2]->img) ?>)">
|
|
<a href="<?php echo $featured[2]->articleURL ?>" class="inner"
|
|
onclick="mug.common.nclick(this, 'bes.banner3');">
|
|
<span class="card_dim"></span>
|
|
<span class="cont_type"><?php echo $featured[2]->pageTitle ?></span>
|
|
<strong class="tit"><?php echo $featured[2]->postTitle ?></strong>
|
|
<span class="writer"><?php echo $featured[2]->userName ?></span>
|
|
</a>
|
|
</div>
|
|
<div class="img_dim"></div>
|
|
</div>
|
|
|
|
<div class="flick-ct eg-flick-panel" role="tabpanel" aria-hidden="false"
|
|
style="position: absolute; width: 967px; height: 100%; box-sizing: border-box; top: 0px; left: 0px; transform: translate(100%); will-change: transform;">
|
|
<div class="cont_area as_post"
|
|
style="background-image:url(<?php echo getImageUrl($featured[3]->img) ?>)">
|
|
<a href="<?php echo $featured[3]->articleURL ?>" class="inner"
|
|
onclick="mug.common.nclick(this, 'bes.banner4');">
|
|
<span class="card_dim"></span>
|
|
<span class="cont_type"><?php echo $featured[3]->pageTitle ?></span>
|
|
<strong class="tit"><?php echo $featured[3]->postTitle ?></strong>
|
|
<span class="writer"><?php echo $featured[3]->userName ?></span>
|
|
</a>
|
|
</div>
|
|
<div class="img_dim"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav_area">
|
|
<a href="#" class="btn prev" role="button"><i class="ico">이전</i></a>
|
|
<a href="#" class="btn next" role="button"><i class="ico">다음</i></a>
|
|
</div>
|
|
<div class="pagination_wrap" style="z-index: 2001">
|
|
<div class="pagination_square" role="tablist">
|
|
<a href="#" role="tab" aria-selected="false" class="__page"><em class="num">1</em></a>
|
|
<a href="#" role="tab" aria-selected="false" class="__page"><em class="num">2</em></a>
|
|
<a href="#" role="tab" aria-selected="false" class="__page"><em class="num">3</em></a>
|
|
<a href="#" role="tab" aria-selected="true" class="__page on"><em class="num">4</em></a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!--Tag image-->
|
|
<div class="tagImg">
|
|
<div class="container">
|
|
<ul>
|
|
<li>
|
|
<a href="/grace/search?keyword=photo">
|
|
<div class="thumb">
|
|
<img
|
|
src="https://crossmap.co.kr/files/life/2019/06/6f91029d6aaf5c04cfb267c1be10ee3f.png">
|
|
</div>
|
|
</a>
|
|
<div class="tagTxt">#Photo</div>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="thumb">
|
|
<img
|
|
src="https://crossmap.co.kr/files/life/2019/06/52db7c6acd48b6f9bae9e8c61e914f25.png">
|
|
</div>
|
|
</a>
|
|
<div class="tagTxt">#Sounds</div>
|
|
</li>
|
|
<li><a href="#">
|
|
<div class="thumb"><img
|
|
src="https://crossmap.co.kr/files/life/2019/06/4007778ee7ac227622fe05bd8fba05c6.png">
|
|
</div>
|
|
</a>
|
|
<div class="tagTxt">#Animation</div>
|
|
</li>
|
|
<li><a href="#">
|
|
<div class="thumb"><img
|
|
src="https://crossmap.co.kr/files/life/2019/06/eb2189dd282cea791cb01ce1cd0c4cb7.png">
|
|
</div>
|
|
</a>
|
|
<div class="tagTxt">#Prayer</div>
|
|
</li>
|
|
<li><a href="#">
|
|
<div class="thumb"><img
|
|
src="https://crossmap.co.kr/files/life/2019/06/ba05616409d09420ddc5d3c46fe68900.png">
|
|
</div>
|
|
</a>
|
|
<div class="tagTxt">#행복</div>
|
|
</li>
|
|
<li><a href="#">
|
|
<div class="thumb"><img
|
|
src="https://crossmap.co.kr/files/life/2019/06/6f91029d6aaf5c04cfb267c1be10ee3f.png">
|
|
</div>
|
|
</a>
|
|
<div class="tagTxt">#아침묵상</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!--이야기 QT-->
|
|
<div class="container pt30">
|
|
<div class="titleBox">
|
|
<ul>
|
|
<li><a href="#">이야기 QT</a></li>
|
|
</ul>
|
|
<div class="arrow">
|
|
<a href="#">더보기 <img src="<?php echo THEME_FOLDER ?>/img/ic-more.gif"></a>
|
|
</div>
|
|
</div>
|
|
<ul class="col col4">
|
|
<?php foreach ($storyqt as $k => $p) {
|
|
if ($k == 4) break; ?>
|
|
<li>
|
|
<a href="<?php echo $p->articleURL ?>">
|
|
<div class="tit">
|
|
<?php echo $p->postTitle ?>
|
|
</div>
|
|
<div class="writer">
|
|
<?php echo $p->author ?>
|
|
</div>
|
|
<div class="thumb">
|
|
<img src="<?php echo $p->postImage ?>">
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<?php } ?>
|
|
</ul>
|
|
</div>
|
|
|
|
<!--말씀카드-->
|
|
<div class="container pt30 pb30">
|
|
<div class="titleBox">
|
|
<ul>
|
|
<li><a href="#">말씀카드</a></li>
|
|
</ul>
|
|
<div class="arrow">
|
|
<a href="#">더보기 <img src="<?php echo THEME_FOLDER ?>/img/ic-more.gif"></a>
|
|
</div>
|
|
</div>
|
|
<ul class="col col5">
|
|
<?php foreach ($wordcard as $k => $p) {
|
|
if ($k == 5) break; ?>
|
|
<li>
|
|
<a href="<?php echo $p->articleURL ?>">
|
|
<div class="tit">
|
|
<?php echo $p->postTitle ?>
|
|
</div>
|
|
<div class="writer">
|
|
<?php echo $p->author ?>
|
|
</div>
|
|
<div class="thumb">
|
|
<img src="<?php echo $p->postImage ?>">
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<?php } ?>
|
|
</ul>
|
|
</div>
|
|
|
|
<!--영상QT-->
|
|
<div class="container btop">
|
|
<div class="titleBox">
|
|
<ul>
|
|
<li><a href="#">영상QT
|
|
</a></li>
|
|
</ul>
|
|
<div class="arrow">
|
|
<a href="#">더보기 <img src="<?php echo THEME_FOLDER ?>/img/ic-more.gif"></a>
|
|
</div>
|
|
</div>
|
|
<ul class="col col4 col4-2">
|
|
<?php foreach ($videoqt as $k => $p) {
|
|
if ($k == 4) break; ?>
|
|
<li>
|
|
<div class="thumb">
|
|
<a href="<?php echo $p->articleURL ?>">
|
|
<img src="<?php echo $p->postImage ?>">
|
|
</a>
|
|
</div>
|
|
<div class="profile">
|
|
<a href="#"><img
|
|
src="https://crossmap.co.kr/files/partner/2018/06/714a4e0153721dddd25dc90ecd8b8c55.jpg"></a>
|
|
<div class="tit">
|
|
<a href="<?php echo $p->articleURL ?>"><?php echo $p->postTitle ?></a>
|
|
</div>
|
|
<div class="writer">
|
|
<a href="<?php echo $p->articleURL ?>"><?php echo $p->author ?></a>
|
|
</div>
|
|
</div>
|
|
<div class="ic_area">
|
|
<div class="float_left">
|
|
<a class="likes" href="#">
|
|
<i class="ico" aria-label="좋아요"></i>
|
|
<span>103</span>
|
|
</a>
|
|
<a class="comments" href="#">
|
|
<i class="ico" aria-label="댓글수"></i>
|
|
<span>29</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="float_right">
|
|
<a href="#" class="hits">
|
|
<i class="ico" aria-label="조회수"></i>
|
|
<span>79</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<?php } ?>
|
|
</ul>
|
|
|
|
</div>
|
|
<!--C포스트-->
|
|
<div class="container pt30 pb30">
|
|
<div class="titleBox">
|
|
<ul>
|
|
<li><a href="#">C포스트</a></li>
|
|
</ul>
|
|
<div class="arrow">
|
|
<a href="/grace/cpost">더보기 <img src="<?php echo THEME_FOLDER ?>/img/ic-more.gif"></a>
|
|
</div>
|
|
</div>
|
|
<div class="cpostBox">
|
|
<div class="cpostMain"
|
|
style="background:url('<?php echo $cpost[0]->postImage ?>') no-repeat center; background-size:cover;">
|
|
<a href="#">
|
|
<div class="bg"></div>
|
|
<div class="tit">
|
|
<?php echo $cpost[0]->postTitle ?>
|
|
</div>
|
|
<div class="writer">
|
|
<?php echo $cpost[0]->author ?>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<ul class="col col5">
|
|
<?php foreach ($cpost as $k => $p) {
|
|
if (!$k || $k>6) continue; ?>
|
|
<li>
|
|
<a href="<?php echo $p->articleURL ?>">
|
|
<div class="tit">
|
|
<?php echo $p->postTitle ?>
|
|
</div>
|
|
<div class="writer">
|
|
<?php echo $p->author ?>
|
|
</div>
|
|
<div class="thumb">
|
|
<img src="<?php echo $p->postImage ?>">
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<?php } ?>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--운율묵상-->
|
|
<div class="container pb30 btop">
|
|
<div class="titleBox">
|
|
<ul>
|
|
<li><a href="/grace/poem">운율묵상</a></li>
|
|
</ul>
|
|
<div class="arrow">
|
|
<a href="/grace/poem">더보기 <img src="<?php echo THEME_FOLDER ?>/img/ic-more.gif"></a>
|
|
</div>
|
|
</div>
|
|
<ul class="col col5">
|
|
<?php foreach ($poem as $k => $p) {
|
|
if ($k==5) break; ?>
|
|
<li>
|
|
<a href="<?php echo $p->articleURL ?>">
|
|
<div class="tit">
|
|
<?php echo $p->postTitle ?>
|
|
</div>
|
|
<div class="writer">
|
|
<?php echo $p->author ?>
|
|
</div>
|
|
<div class="thumb">
|
|
<img src="<?php echo $p->postImage ?>">
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<?php } ?>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<!--영어묵상/인기있는 은혜충전/배너-->
|
|
<div class="grayBox">
|
|
<div class="container">
|
|
<div class="float_left english">
|
|
|
|
<div class="titleBox">
|
|
<ul>
|
|
<li><a class="blue" href="/grace/poem">운율묵상</a></li>
|
|
</ul>
|
|
<div class="arrow">
|
|
<a href="/grace/poem">더보기 <img src="<?php echo THEME_FOLDER ?>/img/ic-more.gif"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="enList">
|
|
<?php foreach($poem as $k=>$p) { if($k<5 || $k>10)continue?>
|
|
<li style="min-height:90px">
|
|
<div class="enImg">
|
|
<a class="img-scaleup" href="<?php echo $p->articleURL ?>"><img
|
|
src="<?php echo $p->postImage ?>" style="height:auto"></a>
|
|
</div>
|
|
<div class="des">
|
|
<h4><a href="<?php echo $p->articleURL ?>"><?php echo $p->postTitle ?></a></h4>
|
|
<p><a href="<?php echo $p->articleURL ?>"><?php echo $p->postExcerpt ?></a></p>
|
|
<div class="blue"><?php echo $p->author ?></div>
|
|
</div>
|
|
</li>
|
|
<?php }?>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="float_left popular">
|
|
<h5 class="blue">인기있는 은혜충전</h5>
|
|
<ul>
|
|
<?php foreach($popular as $k=>$p) { if($k==6)break?>
|
|
<li>
|
|
<div class="num"><?php echo $k+1?></div>
|
|
<div class="popImg">
|
|
<a class="img-scaleup" href="<?php echo $p->articleURL ?>"><img
|
|
src="<?php echo $p->postImage ?>"></a>
|
|
</div>
|
|
<div class="tit">
|
|
<a href="<?php echo $p->articleURL ?>"><?php echo $p->postTitle ?></a>
|
|
</div>
|
|
<div class="blue">
|
|
<a href="<?php echo $p->articleURL ?>"><?php echo $p->author ?></a>
|
|
</div>
|
|
</li>
|
|
<?php }?>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="float_right banner">
|
|
<div class="ad gap-bottom-sm"><a href=""><img
|
|
src="https://crossmap.co.kr/files/advertisement/2019/04/b65bc12d9a44a20ea93b4680a800652c.png"
|
|
alt="" width="300" height="260"></a></div>
|
|
<div class="ad gap-bottom-sm"><a href=""><img
|
|
src="<?php echo THEME_FOLDER ?>/img/bn-300-webtoon.jpg" alt="" width="300"></a></div>
|
|
<div class="ad gap-bottom-sm"><a href=""><img src="<?php echo THEME_FOLDER ?>/img/bn-300-grace.jpg"
|
|
alt="" width="300"></a></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<?php $this->load->view('templates/grace/grace-footer') ?>
|
|
<?php $this->load->view('templates/grace/grace-foot') ?>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
|
|
<script>
|
|
$(function() {
|
|
var slideScreenIdx = 3;
|
|
$('.btn.next').on('click', function() {
|
|
slideScreenIdx++;
|
|
if (slideScreenIdx > 3) slideScreenIdx = 0
|
|
var idx = slideScreenIdx;
|
|
$('.flick-ct').addClass('is_disable');
|
|
$('.pagination_square a').removeClass('on').eq(idx).addClass('on');
|
|
$('.flick-ct').eq(idx).removeClass('is_disable').css('transform', 'translate(100%)');
|
|
$('.flick-ct').eq(idx = ++idx > 3 ? 0 : idx).css('transform', 'translate(200%)');
|
|
$('.flick-ct').eq(idx = ++idx > 3 ? 0 : idx).css('transform', 'translate(300%)');
|
|
$('.flick-ct').eq(idx = ++idx > 3 ? 0 : idx).css('transform', 'translate(0%)');
|
|
});
|
|
$('.btn.prev').on('click', function() {
|
|
slideScreenIdx--;
|
|
if (slideScreenIdx < 0) slideScreenIdx = 3
|
|
var idx = slideScreenIdx;
|
|
$('.flick-ct').addClass('is_disable');
|
|
$('.pagination_square a').removeClass('on').eq(idx).addClass('on');
|
|
$('.flick-ct').eq(idx).removeClass('is_disable').css('transform', 'translate(100%)');
|
|
$('.flick-ct').eq(idx = ++idx > 3 ? 0 : idx).css('transform', 'translate(200%)');
|
|
$('.flick-ct').eq(idx = ++idx > 3 ? 0 : idx).css('transform', 'translate(300%)');
|
|
$('.flick-ct').eq(idx = ++idx > 3 ? 0 : idx).css('transform', 'translate(0%)');
|
|
})
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|