JSFiddle - React, Tailwind, and code Playground

by Alex Stanese

HTML

<title>WhatSnap</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>


<body >

<!-- ******************************* PAGE 1 *************************************-->

<!-- <div id="fade"> </div> -->
<div id="loose"> 
	<h1>Sorry! You lost! :(</h1>
	<button type="button" id="go">Retry</button>
	<button type="button" id="go">EXIT</button>
	<button type="button" id="go">get more bateries</button>
</div>
<div data-role="page" id="page1">
	<div class="header">
		<img src="img/whatsnap.jpg">
	</div>
	<div data-role="content" id="start_page">	
		<img id="play" src="http://img.brothersoft.com/v1/img/images/text_img3.jpg">
			<div id="baterii">
				<img src="img/batteries.png">
				<img src="img/batteries.png">
				<img src="img/batteries.png">
				<img src="img/batteries.png">
				<img src="img/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>

<!-- ******************************* PAGE 2 *************************************-->

<div data-role="page" id="page2">
	<div class="header-two">
		<div id="slider" class="progressBar">
			<div class="progress"></div>
			<!-- <div class="progressText">0%</div> -->
		</div>
	</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>

<!-- ********** slider *********** -->	

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide red-slide">
        <div...

CSS

#fade {
    position: fixed;
    width: 100%!important;
    height: 100%!important;
    background-color: black;
	z-index: 9999;
	top:0px;
    left:0px;
    display:block;
}

#loose {
	opacity: 0;
	visibility: hidden;
    position: fixed;
    width: 100%!important;
    height: 100%!important;
    background-color: black;
	z-index: 9999;
	top:0px;
    left:0px;
    display:block;
    color:white;
}

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

/*.ui-overlay-a{
	background-color:black;		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;
    opacity: 0;
}

#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:...

JavaScript

//$(document).ready(
//  function() {
//      $("#fade").fadeOut( 1500,"swing");
//  }
//);
    
//*********************************************************
// Wait for Cordova to Load
//*********************************************************

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

function onDeviceReady() {

    navigator.splashscreen.hide();   //doar pt phonegap adobe build
    $("#fade").fadeOut( 1500,"swing");


    var myMedia = new Media("file:///android_asset/www/audio/my.mp3");
    var no = new Media("file:///android_asset/www/audio/no.mp3");
    var yes = new Media("file:///android_asset/www/audio/yes.mp3");
    myMedia.play();
    

    $("#play").touchstart(function() {
        $(":mobile-pagecontainer").pagecontainer('change', "#page2", { 
            transition: 'pop',
            reverse: true
        });


//****************************************PAGE 2*******************************************

var mySwiper;
$(document).on("pagecreate","#page2",function(){
    $('.swiper-container').height($.mobile.getScreenHeight() * .22);
    $('.swiper-container').width($(window).width());
    mySwiper = new Swiper('.swiper-container',{
        pagination: '.pagination',
        paginationClickable: false,
        momentumBounceRatio:1,
        resistance:'100%'
    });
    
/////baterie
    SetProgress(100);//init to 100%; 
    

    function GetProgress(){
        var curWid = $("#slider .progress")[0].style.width || 100;
        return parseInt(curWid);
    }

    function SetProgress(val){
        if (val < 0) val = 0;
        if (val > 100) val = 100;
        var color = GetColorForVal(val);
        $("#slider .progress").css({"background": color, "width": val + "%"});
        $("#slider .progressText").text(Math.floor(val) + "%");
        if (val < 20){
            pulsate(".progress");
        }
        if (val == 0 ) {
            pulsate(".progressBar");
            setTimeout(function() {
               ...