<!DOCTYPE html>
<html>
<head>
  <title>Demo</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="shortcut icon" href="favicon.ico">
  <meta http-equiv="cache-control" content="max-age=0" />
  <meta http-equiv="cache-control" content="no-store" />
  <meta http-equiv="expires" content="-1" />
  <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
  <meta http-equiv="pragma" content="no-cache" />


    <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  <script>
	/* ons.disableAutoStyling();
	ons.platform.select('android'); */
  </script>
  
  

<style>html, body {
height: 100%;
margin: 0
}

@keyframes breath {
0%   { background-size: 50% auto; }
50% { background-size: 70% auto; }
100% { background-size: 50% auto; }
}

#bkg{
width: 100%;
height: 50%;
position: absolute;top: 30%;
animation: breath 4s linear infinite;
background: url("https://media.giphy.com/media/zBg3B1KnmX69i/giphy.gif") center center no-repeat;
}</style>
<style>
.selected{
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 0px 0px 0px 0px;
margin: 5px 1px 3px 0px;
border: 5px solid rgba(81, 203, 238, 1);
}
</style>

<script>
function CreateButton(ParentID, Name, Caption){
$("#" + ParentID).append("<ons-button onclick=\"document.title ='" + Name + "';\" id=\"" + Name + "\">" + Caption + "</ons-button>");
}


function CreateTopToolBar(ParentID, Name, Caption){
$("#" + ParentID).append("<ons-toolbar style=\"background-color: #d3d3d3;\"><div class=\"left\"><ons-toolbar-button style=\"color: #00589d;\" onclick=\"document.title ='" + Name + "';\" >" + Caption + "<\/ons-toolbar>");
}

function CreateFooter(ParentID, Name, Caption){
$("#" + ParentID).append("</ons-page>");
}


  var _log = console.log;
  var _error = console.error;
  var _warning = console.warning;

  console.error = function(errMessage){
            document.title = "[Start]";
            document.title = "error>>" + errMessage;
            document.title = "[Done]";
     _error.apply(console,arguments);
  };

  console.log = function(logMessage){
            document.title = "[Start]";
            document.title = "log>>" + logMessage;
            document.title = "[Done]";
            _log.apply(console,arguments);
  };

  console.warning = function(warnMessage){
            document.title = "[Start]";
            document.title = "warning>>" + warnMessage;
            document.title = "[Done]";
            _warning.apply(console,arguments);
  };

</script>

<script type="text/javascript">
window.addEventListener('error', function(event) { 
console.error("======== " + event.error.name + " ========"); 
console.error("Error Message: " + event.message); 
console.error("Error Source: " + event.source); 
console.error("Error Location: Line #" + event.lineno + " : Column #" + event.colno); 
console.error("Error Stack: " + event.error.stack); 
})
</script>
</head><body>
<!--    Load Screen      -->
<ons-page>
	<div class="content" id="content">
		<center><div style="position: absolute;top: 15%;width:100%"><h1><b>Demo</b></h1></div></center>
			<div id="bkg"></div>
	
		<ons-bottom-toolbar>
			<ons-progress-bar indeterminate></ons-progress-bar>
			</br>
				<center>Loading...</center>
		</ons-bottom-toolbar>
	</div>

	<!--     Set Load Screen Timeout to load MainPage     -->
	<script>
		setTimeout(myFunction, 4000);

		function myFunction() {
			var tPage = $( '#mainPage' ).html();
			$( '#content' ).html( tPage );
		}
	</script>

</ons-page>

<!--    Setup App Tabs and load page1.html as first page      -->
<template id="mainPage">
	<ons-page>

		<ons-tabbar id="tabbar" swipeable>
			<ons-tab page="page1.html" active><ons-icon icon="fa-globe"></ons-icon></ons-tab>
			<ons-tab page="page2.html"><ons-icon icon="fa-globe"></ons-icon></ons-tab>
			<ons-tab page="page3.html"><ons-icon icon="fa-globe"></ons-icon></ons-tab>
		</ons-tabbar>
	</ons-page>
</template>

<template id="page1.html">
	<ons-page id="pgpage1.html">
	
		<ons-page>
1
</ons-page>
		
	</ons-page>
</template>

<template id="page2.html">
	<ons-page id="pgpage2.html">
	
		<ons-page>
2
</ons-page>
		
	</ons-page>
</template>

<template id="page3.html">
	<ons-page id="pgpage3.html">
	
		<ons-page>
3
</ons-page>
		
	</ons-page>
</template>
<script>
/*      
Force a Platform Theme across all devices, regardless of OS
ons.platform.select('android');
*/

window.fn = {};
window.fn.load = function(page) {
var content = document.getElementById('content');
content.load(page);
};


ons.ready(function() {

});</script></body>
</html>