jonghwan76
3 years ago
parent
c08cc4645b
commit
174ded8140
@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<#include "/m/include/index_top.ftl">
|
||||
<link rel="stylesheet" href="/bf/m/css/swiper.min.css">
|
||||
<script src="/bf/m/js/swiper.min.js"></script>
|
||||
<body>
|
||||
|
||||
<!-- wrap -->
|
||||
<div class="wrap">
|
||||
|
||||
<!-- header_sub -->
|
||||
<header class="header_wrapper">
|
||||
<h1 class="header_title">메모리</h1>
|
||||
<a href="#" class="side_Rbtn hidden"></a>
|
||||
</header>
|
||||
<!-- //header_sub -->
|
||||
|
||||
<!-- 메모리 카테고리 -->
|
||||
<ul class="memory_ca">
|
||||
<li>
|
||||
<a href="#">
|
||||
타임라인
|
||||
</a>
|
||||
</li>
|
||||
<li class="current">
|
||||
<a href="#">
|
||||
일간
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
주간
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- //메모리 카테고리 -->
|
||||
|
||||
<!-- 컬러 박스 -->
|
||||
<div class="main_cont_kinds active" style="border: none">
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<#list model['category_list'] as item>
|
||||
<div class="swiper-slide">
|
||||
<a style="cursor:pointer;background-color: ${item['color_cd']}"><span>${item['title']!}</span></a>
|
||||
</div>
|
||||
</#list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //컬러 박스 -->
|
||||
|
||||
<!-- 날짜 -->
|
||||
<div class="memory_date">
|
||||
<a href="#"><img src="../img/xxxx_sprites/arrow_01_left.png" alt=""></a>
|
||||
${model['rm_mem']['today']!}(${model['rm_mem']['day']!})
|
||||
<a href="#"><img src="../img/xxxx_sprites/arrow_01_right.png" alt=""></a>
|
||||
</div>
|
||||
<!-- //날짜 -->
|
||||
|
||||
<!-- pie chart -->
|
||||
<div class="chart memory_daily_chart" data-percent="62.5">
|
||||
|
||||
<div class="container">
|
||||
<!-- conic-gradient(from 시작각도deg, 색상, 범위각도deg, 배경색(투명) 0) -->
|
||||
<#list model['time_list'] as item>
|
||||
<div class="data" style="background: conic-gradient(from ${item['start_degree']!}deg,${item['category']!} ${item['add_degree']!}deg, #00ff0000 0)"></div>
|
||||
</#list>
|
||||
<span class="center"></span>
|
||||
</div>
|
||||
|
||||
|
||||
<p class="title1"><span>DAY</span>
|
||||
${model['rm_mem']['past_day']!}d
|
||||
</p>
|
||||
|
||||
<ul class="hour">
|
||||
<li>0</li>
|
||||
<li>2</li>
|
||||
<li>4</li>
|
||||
<li>6</li>
|
||||
<li>8</li>
|
||||
<li>10</li>
|
||||
<li>12</li>
|
||||
<li>14</li>
|
||||
<li>16</li>
|
||||
<li>18</li>
|
||||
<li>20</li>
|
||||
<li>22</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- //pie chart -->
|
||||
|
||||
<div class="fix_icon">
|
||||
<button type="button"><img src="../../img/ico_image_grey_24.png" alt=""></button>
|
||||
<button type="button"><img src="../../img/ico_share_grey_24.png" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //wrap -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<#include "/m/include/index_top.ftl">
|
||||
<link rel="stylesheet" href="/bf/m/css/swiper.min.css">
|
||||
<script src="/bf/m/js/swiper.min.js"></script>
|
||||
|
||||
<body>
|
||||
<!-- wrap -->
|
||||
<div class="wrap" id="memory_timeline">
|
||||
|
||||
<!-- header_sub -->
|
||||
<header class="header_wrapper">
|
||||
<h1 class="header_title">메모리</h1>
|
||||
<a href="#" class="side_Rbtn hidden"></a>
|
||||
</header>
|
||||
<!-- //header_sub -->
|
||||
|
||||
<!-- 메모리 카테고리 -->
|
||||
<ul class="memory_ca">
|
||||
<li class="current">
|
||||
<a href="#">
|
||||
타임라인
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
일간
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
주간
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- //메모리 카테고리 -->
|
||||
|
||||
<!-- 컬러 박스 -->
|
||||
<div class="main_cont_kinds active" style="border: none">
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<#list model['category_list'] as item>
|
||||
<div class="swiper-slide">
|
||||
<a style="cursor:pointer;background-color: ${item['color_cd']}"><span>${item['title']!}</span></a>
|
||||
</div>
|
||||
</#list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //컬러 박스 -->
|
||||
|
||||
<!-- 타임라인 -->
|
||||
<div class="timeline_content">
|
||||
<#assign pre_date = ''>
|
||||
<!-- 날짜별 박스 -->
|
||||
<div class="big_day_div" style="padding-bottom:100px">
|
||||
<#list model['time_list'] as item>
|
||||
|
||||
<#if item['reg_date'] != pre_date>
|
||||
<#assign pre_date = item['reg_date']>
|
||||
<br>
|
||||
<br>
|
||||
<div class="timeline_date" style="z-index:999">${item['reg_date']!}</div>
|
||||
</#if>
|
||||
|
||||
<div class="padding">
|
||||
<div class="day_in_div">
|
||||
|
||||
<ul class="timeline_ul">
|
||||
<#if item['day_diff'] != '0'>
|
||||
<div class="time_title">
|
||||
<p> ${item['day_diff']!}d </p>
|
||||
</div>
|
||||
</#if>
|
||||
|
||||
<#if item['day_diff'] == '0' && item['time_diff'] != '00:00'>
|
||||
<div class="time_title">
|
||||
<p> ${item['time_diff']!} </p>
|
||||
</div>
|
||||
</#if>
|
||||
|
||||
<li>
|
||||
<div class="time">
|
||||
${item['hour_min']!}
|
||||
<span style="background: ${item['color_cd']};"></span>
|
||||
</div>
|
||||
|
||||
<div class="text">
|
||||
<p class="text_tit" style="color: ${item['color_cd']};">${item['title']!}</p>
|
||||
<span>${item['time_val']!}</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</#list>
|
||||
<!-- //padding -->
|
||||
</div>
|
||||
<!-- //날짜별 박스 -->
|
||||
|
||||
</div>
|
||||
<!-- //타임라인 -->
|
||||
|
||||
<div class="fix_icon">
|
||||
<#-- <button type="button"><img src="../img/ico_image_grey_24.png" alt=""></button>-->
|
||||
<button id="share-list" type="button"><img src="../img/ico_share_grey_24.png" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //wrap -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,229 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<#include "/m/include/index_top.ftl">
|
||||
<link rel="stylesheet" href="/bf/m/css/swiper.min.css">
|
||||
<script src="/bf/m/js/swiper.min.js"></script>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- wrap -->
|
||||
<div class="wrap">
|
||||
|
||||
<!-- header_sub -->
|
||||
<header class="header_wrapper">
|
||||
<h1 class="header_title">메모리</h1>
|
||||
<a href="#" class="side_Rbtn hidden"></a>
|
||||
</header>
|
||||
<!-- //header_sub -->
|
||||
|
||||
<!-- 메모리 카테고리 -->
|
||||
<ul class="memory_ca">
|
||||
<li>
|
||||
<a href="#">
|
||||
타임라인
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
일간
|
||||
</a>
|
||||
</li>
|
||||
<li class="current">
|
||||
<a href="#">
|
||||
주간
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- //메모리 카테고리 -->
|
||||
|
||||
<!-- 컬러 박스 -->
|
||||
<div class="main_cont_kinds active" style="border: none">
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<#list model['category_list'] as item>
|
||||
<div class="swiper-slide">
|
||||
<a style="cursor:pointer;background-color: ${item['color_cd']}"><span>${item['title']!}</span></a>
|
||||
</div>
|
||||
</#list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //컬러 박스 -->
|
||||
|
||||
<!-- 날짜 -->
|
||||
<div class="memory_date">
|
||||
<a href="#"><img src="../img/xxxx_sprites/arrow_01_left.png" alt=""></a>
|
||||
${model['rm_mem']['today']!}(${model['rm_mem']['day']!})
|
||||
<a href="#"><img src="../img/xxxx_sprites/arrow_01_right.png" alt=""></a>
|
||||
</div>
|
||||
<!-- //날짜 -->
|
||||
|
||||
<!-- 그래프 -->
|
||||
<div class="week_chart">
|
||||
<div class="gray_box_div">
|
||||
<!-- 가로열 -->
|
||||
<ul class="gray_box">
|
||||
<li>
|
||||
<#assign pre_date = model['dayList']['day1'] + ''>
|
||||
<#assign idx = 0>
|
||||
<#assign pre_hour = ''>
|
||||
<#list model['time_list'] as item>
|
||||
<#if item['day'] == pre_date>
|
||||
<#if (item['hour'] + '') == pre_hour>
|
||||
<#assign idx = idx + 0.5>
|
||||
</#if>
|
||||
<#assign topP = item['hour'] + idx>
|
||||
<#assign pre_hour = item['hour'] + ''>
|
||||
<span title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
|
||||
</#if>
|
||||
</#list>
|
||||
</li>
|
||||
<li>
|
||||
<#assign pre_date = model['dayList']['day2'] + ''>
|
||||
<#assign idx = 0>
|
||||
<#assign pre_hour = ''>
|
||||
<#list model['time_list'] as item>
|
||||
<#if item['day'] == pre_date>
|
||||
<#if (item['hour'] + '') == pre_hour>
|
||||
<#assign idx = idx + 0.5>
|
||||
</#if>
|
||||
<#assign topP = item['hour'] + idx>
|
||||
<#assign pre_hour = item['hour'] + ''>
|
||||
<span title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
|
||||
</#if>
|
||||
</#list>
|
||||
</li>
|
||||
<li>
|
||||
<#assign pre_date = model['dayList']['day3'] + ''>
|
||||
<#assign idx = 0>
|
||||
<#assign pre_hour = ''>
|
||||
<#list model['time_list'] as item>
|
||||
<#if item['day'] == pre_date>
|
||||
<#if (item['hour'] + '') == pre_hour>
|
||||
<#assign idx = idx + 0.5>
|
||||
</#if>
|
||||
<#assign topP = item['hour'] + idx>
|
||||
<#assign pre_hour = item['hour'] + ''>
|
||||
<span title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
|
||||
</#if>
|
||||
</#list>
|
||||
</li>
|
||||
<li>
|
||||
<#assign pre_date = model['dayList']['day4'] + ''>
|
||||
<#assign idx = 0>
|
||||
<#assign pre_hour = ''>
|
||||
<#list model['time_list'] as item>
|
||||
<#if item['day'] == pre_date>
|
||||
<#if (item['hour'] + '') == pre_hour>
|
||||
<#assign idx = idx + 0.5>
|
||||
</#if>
|
||||
<#assign topP = item['hour'] + idx>
|
||||
<#assign pre_hour = item['hour'] + ''>
|
||||
<span title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
|
||||
</#if>
|
||||
</#list>
|
||||
</li>
|
||||
<li>
|
||||
<#assign pre_date = model['dayList']['day5'] + ''>
|
||||
<#assign idx = 0>
|
||||
<#assign pre_hour = ''>
|
||||
<#list model['time_list'] as item>
|
||||
<#if item['day'] == pre_date>
|
||||
<#if (item['hour'] + '') == pre_hour>
|
||||
<#assign idx = idx + 0.5>
|
||||
</#if>
|
||||
<#assign topP = item['hour'] + idx>
|
||||
<#assign pre_hour = item['hour'] + ''>
|
||||
<span title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
|
||||
</#if>
|
||||
</#list>
|
||||
</li>
|
||||
<li>
|
||||
<#assign pre_date = model['dayList']['day6'] + ''>
|
||||
<#assign idx = 0>
|
||||
<#assign pre_hour = ''>
|
||||
<#list model['time_list'] as item>
|
||||
<#if item['day'] == pre_date>
|
||||
<#if (item['hour'] + '') == pre_hour>
|
||||
<#assign idx = idx + 0.5>
|
||||
</#if>
|
||||
<#assign topP = item['hour'] + idx>
|
||||
<#assign pre_hour = item['hour'] + ''>
|
||||
<span title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
|
||||
</#if>
|
||||
</#list>
|
||||
</li>
|
||||
<li>
|
||||
<#assign pre_date = model['dayList']['day7'] + ''>
|
||||
<#assign idx = 0>
|
||||
<#assign pre_hour = ''>
|
||||
<#list model['time_list'] as item>
|
||||
<#if item['day'] == pre_date>
|
||||
<#if (item['hour'] + '') == pre_hour>
|
||||
<#assign idx = idx + 0.5>
|
||||
</#if>
|
||||
<#assign topP = item['hour'] + idx>
|
||||
<#assign pre_hour = item['hour'] + ''>
|
||||
<span title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
|
||||
</#if>
|
||||
</#list>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="border_box">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
|
||||
<div class="time_bar" style="top:-9px;">
|
||||
<span></span>
|
||||
<div class="time_bar_number">
|
||||
<img src="../../img/time_bar02.png" alt="">
|
||||
<p>00:00</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="time_bar02" style="top:57%;">
|
||||
<span></span>
|
||||
<img src="../../img/time_bar.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="number_bottom">
|
||||
<li>${model['dayList']['day1']!}</li>
|
||||
<li>${model['dayList']['day2']!}</li>
|
||||
<li>${model['dayList']['day3']!}</li>
|
||||
<li>${model['dayList']['day4']!}</li>
|
||||
<li>${model['dayList']['day5']!}</li>
|
||||
<li>${model['dayList']['day6']!}</li>
|
||||
<li>${model['dayList']['day7']!}</li>
|
||||
</ul>
|
||||
|
||||
<ul class="number_right">
|
||||
<li>01</li>
|
||||
<li>03</li>
|
||||
<li>06</li>
|
||||
<li>09</li>
|
||||
<li>12</li>
|
||||
<li>15</li>
|
||||
<li>18</li>
|
||||
<li>21</li>
|
||||
<li>24</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--// 그래프 -->
|
||||
|
||||
<div class="fix_icon">
|
||||
<button type="button"><img src="../../img/ico_image_grey_24.png" alt=""></button>
|
||||
<button type="button"><img src="../../img/ico_share_grey_24.png" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //wrap -->
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue