java
/
bf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

퍼블리싱 - 6.튜토리얼 (임시)

Browse Source
dev_bert
isol2011 3 years ago
parent 02d86895db
commit ff91ee9e51
3 changed files with 412 additions and 56 deletions
Show Stats Download Patch File Download Diff File

119
src/main/webapp/m/css/style.css
Unescape View File

@ -14884,62 +14884,6 @@ main.sona_cont_measurement {
border:1px solid #FF9C01; border:1px solid #FF9C01;
} }
/* 튜토리얼 */
.tutorial {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.tutorial .blur {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.6;
z-index: 99;
}
.tutorial .content{
width: 100%;
height: 100%;
position: absolute;
z-index: 99;
display: flex;
align-items: center;
flex-direction: column;
border: 1px solid #fff;
}
.tutorial .title {
color: #FFFFFF;
font-size: 18px;
line-height: 27px;
text-align: center;
}
.tutorial .top_margin {
margin-top: 30px;
}
.tutorial .align_center {
display: flex;
flex-direction: column;
justify-content: center;
}
.tutorial .img01 {
width: 226px;
height: 458px;
border: 1px solid #999;
}
/*커뮤니티 게시글 등록*/ /*커뮤니티 게시글 등록*/
.vote_community_write .write_box .write_cata{ .vote_community_write .write_box .write_cata{
padding: 3px 6px; padding: 3px 6px;
@ -15097,6 +15041,69 @@ main.sona_cont_measurement {
color: #000000; color: #000000;
} }
/* 6.튜토리얼 */
.tutorial {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(0, 0, 0, 0.6);
z-index: 99999;
}
.tutorial .cont_title {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 7.5%;
}
.tutorial .title {
color: #fff;
font-size: 1.1rem;
line-height: 1.5rem;
}
.tutorial .cont_img {
margin-top: 7.5%;
}
.tutorial .cont_sub_title {
margin-top: 5%;
}
.tutorial .cont_btn {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
width: calc(100% - 40px);
display: flex;
flex-direction: column;
}
.tutorial .skip {
color: #fff;
display: flex;
justify-content: flex-end;
}
.tutorial .btn {
width: 100%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFFCC;
border-radius: 10px;
margin-top: 1rem;
}
/* 8-4.설정하기-전화번호변경 */ /* 8-4.설정하기-전화번호변경 */
.connect .display_none { .connect .display_none {
display: none; display: none;

349
src/main/webapp/m/html/tutorial/6.튜토리얼.html
Unescape View File

@ -0,0 +1,349 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
<title>이유식당::홈</title>
<link rel="shortcut icon" href="../../img/favicon.ico">
<link rel="stylesheet" href="../../css/style.css">
<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../js/masonry.pkgd.min.js"></script>
<script src="../../js/jquery.bxslider.js"></script>
<link rel="stylesheet" href="../../css/swiper.min.css">
<script src="../../js/swiper.min.js"></script>
</head>
<body>
<!-- wrap -->
<div class="wrap">
<!-- header -->
<header class="header_wrapper">
<div class="left_btn_box">
<a href="../sn_member_env/setting.html" class="side_Rbtn setting_btn hidden">설정</a>
</div>
<div class="center_btn_box">
<h1 class="brand_logo hidden">이유식당</h1>
</div>
<div class="right_btn_box">
<a href="../sn_alarm/list_sn_alarm.html" class="side_Rbtn noti_new_btn hidden">알림센터</a>
</div>
</header>
<!-- main -->
<div class="main">
<!-- main_top -->
<div class="main_top">
<!-- main_pofile -->
<div class="main_pofile">
<!-- main_pofile_slider -->
<div class="bxslider-wrapper" style="visibility: hidden; opacity: 0;">
<ul class="main_pofile_slider">
<li>
<div class="main_pofile_txt">
<h2>가온이 (남)</h2>
<p>124일 (17주 5일/4개월 4일)</p>
<p class="d_day">200일 D-75, 2022-01-20</p>
</div>
<div class="main_pofile_img">
<p>
<a href="#"><img src="../../img/main/nutrition_cont_img_camera.png" alt="프로필 사진" /></a>
</p>
</div>
</li>
<li>
<div class="main_pofile_txt">
<h2>가온이 (남)</h2>
<p>124일 (17주 5일/4개월 4일)</p>
<p class="d_day">200일 D-75, 2022-01-20</p>
</div>
<div class="main_pofile_img">
<p>
<a href="#"><img src="../../img/main/nutrition_cont_img_camera.png" alt="프로필 사진" /></a>
</p>
</div>
</li>
<li>
<div class="main_pofile_txt">
<h2>가온이 (남)</h2>
<p>124일 (17주 5일/4개월 4일)</p>
<p class="d_day">200일 D-75, 2022-01-20</p>
</div>
<div class="main_pofile_img">
<p>
<a href="#"><img src="../../img/main/nutrition_cont_img_camera.png" alt="프로필 사진" /></a>
</p>
</div>
</li>
</ul>
</div>
<!-- //main_pofile_slider -->
<!-- main_pofile_info_wrap -->
<div class="main_pofile_info_wrap">
<!-- main_pofile_info -->
<div class="main_pofile_info main_pofile_info01">
<!-- main_pofile_info_txt -->
<div class="main_pofile_info_txt txt01 active">
<div class="main_pofile_info_txt02"><strong>135.2</strong>cm</div>
</div>
<!-- main_pofile_info_txt -->
<div class="main_pofile_info_txt txt02">
<div class="main_pofile_info_txt02"><strong>1111</strong>kg</div>
</div>
<div class="main_pofile_info_tit">
<span class="txt01 active">cm</span>
<span class="txt02">kg</span>
</div>
</div>
<!-- main_pofile_info -->
<div class="main_pofile_info main_pofile_info02">
<!-- main_pofile_info_txt -->
<div class="main_pofile_info_txt txt01 active">
<div class="main_pofile_info_txt02"><strong>96</strong>점</div>
</div>
<!-- main_pofile_info_txt -->
<div class="main_pofile_info_txt txt02">
<div class="main_pofile_info_txt02"><strong>22</strong>%</div>
</div>
<div class="main_pofile_info_tit">
<span class="txt01 active">영양</span>
<span class="txt02">DQI</span>
</div>
</div>
</div>
<!-- //main_pofile_info_wrap -->
<!-- main_cont_kinds -->
<!-- class명 active 를 넣으면 display:block 처리, 빼면 none 처리입니다. -->
<div class="main_cont_kinds active">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#" style="background-color: #FF7C80"><span>모유</span></a>
</div>
<div class="swiper-slide">
<a href="#" style="background-color: #FF9933"><span>젖병</span></a>
</div>
<div class="swiper-slide">
<a href="#" style="background-color: #FFCC00"><span>홈메이드</span></a>
</div>
<div class="swiper-slide">
<a href="#" style="background-color: #A4DE00"><span>시판</span></a>
</div>
<div class="swiper-slide">
<a href="#" style="background-color: #7FE1A7"><span>간식</span></a>
</div>
<div class="swiper-slide">
<a href="#" style="background-color: #84DCD2"><span>수면</span></a>
</div>
<div class="swiper-slide">
<a href="#" style="background-color: #A1D3E3"><span>대소변</span></a>
</div>
<div class="swiper-slide">
<a href="#" style="background-color: #B5A0DC"><span>병원</span></a>
</div>
<div class="swiper-slide">
<a href="#" style="background-color: #D09CE0"><span>체온</span></a>
</div>
<div class="swiper-slide">
<a href="#" style="background-color: #EB91C7"><span>생활</span></a>
</div>
<div class="swiper-slide">
<a href="#" style="background-color: #F38998"><span>성취</span></a>
</div>
<div class="swiper-slide">
<a href="#" style="background-color: #D59A6D"><span>유축</span></a>
</div>
<div class="swiper-slide">
<a href="#"><span>수정/설정</span></a>
</div>
</div>
</div>
</div>
<!-- //main_cont_kinds -->
<!-- main_cont_last_status -->
<div class="main_cont_last_status">
<div>
<p>마지막 식사</p>
<span>4시간 25분 전 / 300ml</span>
</div>
<div>
<p>마지막 수면</p>
<span>4시간 25분 전</span>
</div>
<div>
<p>마지막 대소변</p>
<span>4시간 25분 전 / 대변</span>
</div>
</div>
<!-- //main_cont_last_status -->
</div>
<!-- //main_pofile -->
</div>
<!-- //main_top -->
<!-- main_cont -->
<div class="main_cont">
<!-- 타임라인 line -->
<div class="main_cont_line"></div>
<ul id="ul_photo" class="main_cont_camera">
<li name="li_img_preview" onclick="location.href=''" >
<div class="img_preview">
<!-- <#if (item['nutirition_cd_no_title'])?has_content>
<#assign nutirition_cd_no_title = item['nutirition_cd_no_title']>
</#if> -->
<img src="../../img/main/main_cont_img_camera.png" alt="사진영역">
</div>
<div class="main_cont_circle" style="border-color: #FFCC00;"></div>
<div class="main_cont_info">
<div class="info_title">
<p style="color: #FFCC00;">이유식(고구마미음)</p>
<span class="info_time">2:20 PM</span>
</div>
<div class="info_amount">
<p>20g</p>
</div>
<div class="info_recode" style="border-color: #FFCC00;">
<p style="color: #FFCC00;">순간의 기록</p>
<span>$username가 고구마 마늘을 빨리 띄었다.<br>입맛에 잘 맞나보다.</span>
</div>
</div>
</li>
<li name="li_img_preview" onclick="location.href=''" >
<div class="img_preview">
<!-- <#if (item['nutirition_cd_no_title'])?has_content>
<#assign nutirition_cd_no_title = item['nutirition_cd_no_title']>
</#if> -->
<img src="../../img/main/main_cont_img_camera.png" alt="사진영역">
</div>
<div class="main_cont_circle" style="border-color: #FF7C80;"></div>
<div class="main_cont_info">
<div class="info_title">
<p style="color: #FF7C80;">모유 수유</p>
<span class="info_time">2:20 PM</span>
</div>
<div class="info_amount">
<p>20g</p>
</div>
<div class="info_recode" style="border-color: #FF7C80;">
<p style="color: #FF7C80;">순간의 기록</p>
<span>$username가 고구마 마늘을 빨리 띄었다.<br>입맛에 잘 맞나보다.</span>
</div>
</div>
</li>
<li name="li_img_preview" onclick="location.href=''" >
<div class="img_preview">
<!-- <#if (item['nutirition_cd_no_title'])?has_content>
<#assign nutirition_cd_no_title = item['nutirition_cd_no_title']>
</#if> -->
<img src="../../img/main/main_cont_img_camera.png" alt="사진영역">
</div>
<div class="main_cont_circle"></div>
<div class="main_cont_info">
<div class="info_title">
<p>이유식(고구마마늘)3</p>
<span class="info_time">2:20 PM</span>
</div>
<div class="info_amount">
<p>20g</p>
</div>
<div class="info_recode">
<p>순간의 기록</p>
<span>$username가 고구마 마늘을 빨리 띄었다.<br>입맛에 잘 맞나보다.</span>
</div>
</div>
</li>
</ul>
<!-- //main_cont_camera -->
</div>
<!-- //main_cont -->
</div>
<!-- //main -->
</div>
<!-- //wrap -->
<!-- 하단 네비 iyu_nav -->
<nav class="iyu_nav">
<ul>
<li class="nav_list01">
<a href="../sn_nutrition/view_sn_nutrition_main.html">
<div class="icon">영양</div>
<div class="tit">영양</div>
</a>
</li>
<li class="nav_list02">
<a href="../sn_growth_body/view_sn_growth_main.html">
<div class="icon">성장</div>
<div class="tit">성장</div>
</a>
</li>
<li class="nav_list03">
<a href="../sn_index/index.html">
<div class="icon">홈</div>
<div class="tit">홈</div>
</a>
</li>
<li class="nav_list04">
<a href="../sn_food_information/view_sn_food_information_main.html">
<div class="icon">식품정보</div>
<div class="tit">식품정보</div>
</a>
</li>
<li class="nav_list05">
<a href="../sn_community/list_sn_community.html">
<div class="icon">커뮤니티</div>
<div class="tit">커뮤니티</div>
</a>
</li>
</ul>
</nav>
<!-- //iyu_nav -->
<!-- 튜토리얼 -->
<div class="tutorial">
<div class="cont_title">
<div class="title">엄마는 기록만 하세요!</div>
<div class="title">관리는 저희가 해드릴께요!</div>
</div>
<div class="cont_img">
<img src="../../img/tutorial/img_tutorial_1.png
">
</div>
<div class="cont_sub_title">
<div class="title">내 아이의 모든 순간을 기록해보세요</div>
</div>
<div class="cont_btn">
<div class="skip">건너뛰기 ></div>
<div class="btn">다음</div>
</div>
</div>
</body>
</html>

BIN
src/main/webapp/m/img/tutorial/img_tutorial_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

Write Preview
Loading…
Cancel
Save