JSFiddle - React, Tailwind, and code Playground

by Alex Stanese

HTML

<script src="code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">


<body >
<!-- Main Page -->


<div data-role="page" id="page1">
	<div class="header">
		<img src="whatsnap.jpg">
	</div>
	<div data-role="content" id="start_page">	
		<img id="play" src="ic_launcher.png">
			<div id="baterii">
				<img src="batteries.png">
				<img src="batteries.png">
				<img src="batteries.png">
				<img src="batteries.png">
				<img src="batteries.png">
			</div>
		<h2 class="photos">img- 32 photos</h2>
		<h2 class="album">Album 2</h2>
	</div>
	<div class="footer">
		<p class="ads">ads</p>
		<p class="help">help</p>
		<p class="volume">volume</p>
	</div>
</div>


<div data-role="page" id="page2">
	<div class="header">
		<img id="battery" src="img/battery.png">
	</div>
	<div data-role="content" class="tools">	
		<div id="frame">
			<img id="photo" src="img/Album1/1.jpg">
		</div>
		<div class="menu">
			<button type="button" id="item">item</button>
			<button type="button" id="go">GO</button>
			<button type="button" id="help">ask for help f</button>
		</div>
	</div>
				
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide red-slide">
        <div class="title">Slide 1</div>
      </div>
      <div class="swiper-slide blue-slide">
        <div class="title">Slide 2</div>
      </div>
      <div class="swiper-slide orange-slide">
        <div class="title">Slide 3</div>
      </div>
    </div>
    <div class="pagination"> </div>
  </div>
	  	


</div>











</body>
</html>

CSS

#fade {
    position: absolute;
    width: 100%;
    height: 100%;
    color: yellow;
    background-color: black;
	z-index: 9999;
}

/*.ui-page {
    -webkit-backface-visibility: hidden;
}*/

/*.ui-overlay-a{
	background-color:black;		ca sa imi faca prima tranzitie neagra
}*/
body{
	background-color: black !important;   /*ca sa imi faca prima tranzitie neagra*/
}

/*ca sa nu se miste textu din a doua paginaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
/*#game{
	position: absolute;
    width: 100%;				
    height: 100%;
}*/
/*ca sa nu se miste textu din a doua a si scoate din js functia si pune clasic a hreffffffffffffffffff*/

.header{
	width: 100%; 
	display: block; 
	margin: 0 auto;
}
.header img{
	margin: 0 auto !important; 
	width:100%;
}

#start_page{

}

#play{
	margin: 0 auto; 
    width: 40%;
    margin-top:30%;
	display: -webkit-box;
    position: relative;
}

#baterii{
	text-align: center;
	margin-top:25%
}

#baterii img{
	width: 10%;
    margin-right: 4%;
    margin-left: 4%;
}


/*#play img{
    margin: 0 auto; 
    width: 40%;
    left: 0;
    right: 0;
    margin-top:20%;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
}

.baterii{
  margin-top: 80%;
  text-align: center;
}

.baterii img {
    width: 10%;
    left: 0;
    right: 0;
    margin-right: 4%;
    margin-left: 4%;
    position: relative;
    display: inline-block; 
}*/


.photos{
	margin-top:5%;
	margin-bottom:0%;
	position: relative;
  /*margin-top:5%;*/
}

.album{
	position: relative;
	/*margin-top:1%;*/
	margin:0 auto;
}


.footer{
	position:fixed;
	bottom:0;
	width: 100%;
}

.footer p{
	display:inline;
	margin: 0 auto;
}

.ads{
	left: 3%;
	position: relative;
}

.help{
	float:right;
	right: 3%;
	position: relative;
}

.volume{
	float:right;
	right: 5%;
	position: relative;
}

#battery{
	position: absolute;
	width: 80%;
	left: 0%;
	right: 0%;
	top: 0.8%;
}

.tools{
	margin-top: 17%;
	padding: 2%;
}

#frame{
	border-style:...

JavaScript

//*********************************************************
// Wait for Cordova to Load
//*********************************************************

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

    $("#fade").fadeOut( 1500,"swing");

    $("#play").click(function() {
        // $.mobile.changePage("#page2", { transition: "pop"});
        $(":mobile-pagecontainer").pagecontainer('change', "#page2", { 
            transition: 'pop',
            reverse: true
        });
        // $("#photo").hide().delay(1000).fadeOut();
            //puneo la loc cand faci pag2!!! $("#photo").animate({opacity: 0.0}, 1);
    });  
    
    $("#frame").click(function() {
        // $.mobile.changePage("#page2", { transition: "pop"});
        // $("#photo").show().delay(100).fadeOut();
         $("#photo").animate({opacity: 1.0}, 1).delay(1).animate({opacity: 0.0}, 300).delay(2000);
    }); 



 $(document).on("pagebeforeshow","#page2",function(){

    var mySwiper = $('.swiper-container').swiper({
        pagination: '.pagination',
        paginationClickable: false,
        momentumBounceRatio:1
    });
    alert('gata');
});








}