콘디쌤2017.05.02 10:28
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
    <!-- Good default declaration:
    * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
    * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
    * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
        * Enable inline JS: add 'unsafe-inline' to default-src
        * Enable eval(): add 'unsafe-eval' to default-src
    * Create your own at http://cspisawesome.com
    -->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->

    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>

<body>
    <div class="page home active">
        <header>
        	<div class="title">씨레시피</div>
            <nav>
            	<div class="gnb sel">홈</div>
            	<div class="gnb">레시피</div>
            	<div class="gnb">동영상</div>
            	<div class="gnb">마이페이지</div>
            </nav>
        </header>

		<div class="contents">        
            <div class="content">
                <section class="visual">
                    <div class="swiper">
                        <div class="swiper-wrap">
                            <div class="swipe">
                                <div class="image"><img src="img/Koala.jpg" /></div>
                            </div>
                            <div class="swipe">
                                <div class="image"><img src="img/Penguins.jpg" /></div>
                            </div>
                            <div class="swipe">
                                <div class="image"><img src="img/Jellyfish.jpg" /></div>			
                            </div>
                        </div>
                    </div>
                
                </section>
                
                <section>
                HELLO
                </section>
            </div>
            <div class="content recipe">
            	
                <div class="listview">
                	<div class="list">
                    	<div class="image"><img src="img/Koala.jpg" /></div>
                        <div class="subject">코알라</div>
                        <div class="desc">귀여운 코알라 ...</div>
                    </div>
                    <div class="list">
                    	<div class="image"><img src="img/Penguins.jpg" /></div>
                        <div class="subject">펭귀인</div>
                        <div class="desc">귀여운 펭귀인 ...</div>
                    </div>
                    <div class="list">
                    	<div class="image"><img src="img/Jellyfish.jpg" /></div>
                        <div class="subject">해파리</div>
                        <div class="desc">귀여운 해파리 ...</div>
                    </div>
                </div>
                
            </div>
            <div class="content video">
            	
                <div class="listview">
                    <div class="list">
                        <div class="movie"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/wXxfFXWMjbQ" frameborder="0" allowfullscreen></iframe>
                        </div>
                        <div class="subject">백종원 카레, 집밥 백선생</div>
                        <div class="cover"></div>
                    </div>  
                       
                    <div class="list">
                        <div class="movie"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/wXxfFXWMjbQ" frameborder="0" allowfullscreen></iframe>
                        </div>
                        <div class="subject">백종원 카레, 집밥 백선생</div>
                        <div class="cover"></div>
                    </div>     
                       
                    <div class="list">
                        <div class="movie"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/wXxfFXWMjbQ" frameborder="0" allowfullscreen></iframe>
                        </div>
                        <div class="subject">백종원 카레, 집밥 백선생</div>
                        <div class="cover"></div>
                    </div>     
                </div>
                
                
            </div>
            <div class="content">
            	마이페이지
            </div>
        </div>
        
        <footer></footer>
    </div>
    
    
    <div class="page detail">
    	<header>
        	<button class="back">이전</button>
        	<div class="title"></div>
        </header>
        <div class="content">
        	<div class="image"><img src="img/Penguins.jpg" /></div>
        	<div class="desc"></div>
        </div>
    </div>
    
    <div class="popup">
    	<div class="close">닫기</div>
    	<div class="movie"><iframe width="100%" height="100%" src="" frameborder="0" allowfullscreen></iframe></div>
    </div>
    
    
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/swipe.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

</html>

* {
	font-family: sans-serif;
	letter-spacing: -1px;
}

body {
	margin: 0;
}

div, section, header, footer, nav {
	position: relative;
}

img {
	vertical-align: top;
	width: 100%;
}

.page {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	overflow: auto;
	background-color: #eee;
	
	transform: translateX(100%);
	transition: transform 0.3s;
}
.page.active {
	transform: translateX(0);
}

header {
	position: fixed;
	top: 0; left: 0; right: 0; height: 96px;
	background-color: orangered;
	transition: transform 0.4s;
	z-index: 999;
}
header.small {
	transform: translateY(-50%);
}

header .title {
	color: #fff;
	font-size: 1.2em;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 12px;
}
.page.detail header {
	height: 48px;
	background-color: rgba(0, 0, 0, 0.5);
}
.page.detail .image {
	position: relative;
}
.page.detail .content {
	display: block;
}

.page.home .content {
	margin-top: 96px;
	display: none;
}
.page.home .content:first-child {
	display: block;
}

nav {
	position: absolute;
	top: 48px;
	left: 0; right: 0;
	height: 48px;
}

nav .gnb {
	color: rgba( 255, 255, 255, 0.9);
	float: left;
	width: 25%;
	text-align: center;
	height: 46px;
	font-size: 1em;
	line-height: 46px;
	border-bottom: 2px solid rgba( 255, 255, 255, 0);
}
nav .gnb.sel {
	color: rgba( 255, 255, 255, 1);
	border-bottom: 2px solid rgba( 255, 255, 255, 1);
}

.swiper {
	position: relative;
	overflow: hidden;
	visibility: hidden;
}
.swiper-wrap {
	position: relative;
	overflow: hidden;
}
.swiper-wrap .swipe {
	position: relative;
	float:left;
	width:100%;
	padding-top: 25%;
}
.swiper-wrap .swipe .image {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
}

.content.recipe .list {
	border-bottom: 1px solid #ddd;
	overflow: hidden;
}
.content.recipe .list .image {
	width: 40%;
	float: left;
}

.video .movie, .popup .movie {
	width: 100%;
	padding-top: 56.25%;
}
.video .list {
	padding: 3%;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.video .movie iframe, .popup .movie iframe {
	position: absolute;
	top: 0;
}

.video .cover {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	
}

.popup {
	position: fixed;
	width: 90%;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.5);
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50%);
	display: none;
}
.popup .close {
	text-align: right;	
	padding: 4px 10px;
	background-color: gray;
	color: #fff;
}

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

$(document).ready(function(){
	
	window.mySwipe = $('.swiper').Swipe().data('Swipe');
	
	$("nav .gnb").click(function(){
		
		$("nav .gnb.sel").removeClass("sel");
		$(this).addClass("sel");
		
		$(".page.home .content").fadeOut("fast");
		$(".page.home .content").eq( $(this).index() ).fadeIn("fast");
		
	});
	
	$(".page.home").scroll(function(){
		
		var scrollTop = $(".page.home").scrollTop();
		
		if (scrollTop >= 50) {
			$(".home header").addClass("small");
		} else {
			$(".home header").removeClass("small");
		}
		
	});
	
	$(".page").scroll(function(){
		
		var scrollTop = $(this).scrollTop();
		$(this).find("header").css("top", scrollTop);
		
	});
	
	
	
	$(".recipe .list").click(function(){
		
		var subject = $(this).find(".subject").text();
		var src = $(this).find(".image img").attr("src");

		$(".page.detail").find("header .title").text( subject );
		$(".page.detail").find(".image img").attr("src", src);
		
		$(".page.detail").addClass("active");
		
	});
	
	$("button.back").click(function(){
		
		$(this).parent().parent().removeClass("active");
		
	});
	
	$(".video .list").click(function(){
		$(".page").fadeOut(400);
		$(".popup").fadeIn(400);
		
		var src= $(this).find("iframe").attr("src");
		
		$(".popup iframe").attr("src", src);
		
	});
	
	$(".popup").click(function(){
		$(".page").fadeIn(400);
		$(".popup").fadeOut(400);
	});
	
});
문서 첨부 제한 : 0Byte/ 10.00MB
파일 크기 제한 : 10.00MB (허용 확장자 : *.*)