<!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>
#pgMenuPage .page__background {
background: #9D0C1C; 
/*    #155993;      */
}

#bgGear {
font-size: 10px;
}

#mainTB {
background: #C60C1C;
}

#icoSettingsicon, #menuBarButton {
color: white;	
}

#MainTitle {
color: white;
font-size: 1.7em;
-webkit-text-stroke: 1px black;
}

#Tab1, #Tab2 {
color: white;
background: #C60C1C;
}

.tabbar__icon, .tabbar__label {
fill: white;
color: white;
}

#tabBarMain > div.tabbar.ons-tabbar__footer.ons-swiper-tabbar.tabbar--material > div {
background: white;
}

.notification {
color: black;
background: #FBE54A;
}



#pgTab2 {
	
	
	
}

#pgTab2 .page__background {
	background: white;
}
#tbTab2 {
	
	
	
}

#tbTab2, #menuBarButtonpTab2, #Tab6Title  {
color: white;
background: #C60C1C;
}


#pgTab3 {
	
	
	
}

#pgTab3 .page__background {
background: white;	

}
#img1 {
	
}


.tbox {
font-family: Roboto,Noto,sans-serif;
-webkit-font-smoothing: antialiased;
font-weight: 400;
font-weight: 400;
border-radius: 2px;
height: 48px;
background-color: #fafafa;
background-color: #fafafa;
background-size: 18px;
background-position: 18px center;
font-size: 14px;
padding: 10px 10px 0 10px;
box-shadow: 0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24),0 1px 0 0 rgba(255,255,255,.06) inset;
}
#mapb1 {
	height: 100%; 
	width: 100%; 
}

#pgTab4 .page__background {
	background: white;
}

#SettingsTitle {
color: white;
font-size: 1.7em;
-webkit-text-stroke: 1px black;
}

#SettingsBackButton, #SettingsTitle, #TBSettings  {
color: white;
background: #C60C1C;
}

.back-button-icon, .back-button--material__icon {
fill: white;
color: white;
}




#pgTab6 {
	
}

#pgTab6 .page__background {
	background: white;
}

#Tab6Title {
color: white;
font-size: 1.7em;
-webkit-text-stroke: 1px black;

}

#tbTab6, #menuBarButtonpg6, #Tab6Title  {
color: white;
background: #C60C1C;
}

#pgTab8 .page__background {
	background: white;
}


#Tab8Title {
color: white;
font-size: 1.7em;
-webkit-text-stroke: 1px black;
}


#Tab8Icon, #Tab8 {
color: white;
background: #C60C1C;
}</style>
</head><body>
<script>ons.platform.select('android');</script>
<ons-navigator id="pushpage_navigator" animation="slide">
	<ons-page>
		<ons-splitter>
			<ons-splitter-side id="menu" side="left" width="220px" collapse>
				<ons-page id="pgMenuPage">
					<ons-list>
						<ons-list-item onclick="fn.load('tab1.html')" tappable>1</ons-list-item>
						<ons-list-item onclick="fn.load('tab6.html')" tappable>6</ons-list-item>
						<ons-list-item onclick="fn.load('tab8.html')" tappable>8</ons-list-item>
					</ons-list>
				</ons-page>
			</ons-splitter-side>

			<ons-splitter-content id="content" page="tab1.html"></ons-splitter-content>
		</ons-splitter>
	</ons-page>
</ons-navigator>

<template id="tab1.html">
	<ons-page id="pgTab1"> 
		<ons-toolbar id="mainTB">
			<div class="left">
				<ons-toolbar-button onclick="fn.open()">
					<ons-icon icon="md-menu" id="menuBarButton"></ons-icon>
				</ons-toolbar-button>
			</div>

			<div class="center" id="MainTitle">Demo</div>

			<div class="right"><ons-toolbar-button id="icoSettings">
				<ons-icon id="icoSettingsicon" icon="md-settings" onclick="change('tab4.html')"></ons-icon><!--    <span id="bgGear" class="notification">1</span>      -->
			</ons-toolbar-button></div>
		</ons-toolbar>

		<!-- Include Templates for each tab - shown as pages below -->
		<ons-tabbar id="tabBarMain" swipeable position="bottom">
			<ons-tab id="Tab1" page="tab3.html" label="Tab 3" icon="ion-home, material:md-home" badge="7" active></ons-tab>
			<ons-tab id="Tab2" page="tab2.html" label="Tab 2" icon="md-settings" active-icon="md-face"></ons-tab>
		</ons-tabbar>

	</ons-page>
</template>
<template id="tab2.html">
	<ons-page id="pgtab2.html">
	
		<ons-page id="pgTab2">

Tab 2


</ons-page>
		
	</ons-page>
</template>

<template id="tab3.html">
	<ons-page id="pgtab3.html">
	
		<ons-page id="pgTab3">

Tab 3


</ons-page>
		
	</ons-page>
</template>

<template id="tab4.html">
	<ons-page id="pgtab4.html">
	
		
<ons-page id="pgTab4">
	<ons-toolbar id="TBSettings">
		<div class="left"><ons-back-button id="SettingsBackButton">Back</ons-back-button></div>
		<div class="center" id="SettingsTitle">Settings</div>
	</ons-toolbar>



</ons-page>

		
	</ons-page>
</template>

<template id="tab6.html">
	<ons-page id="pgtab6.html">
	
		<ons-page id="pgTab6">
	<ons-toolbar id="tbTab6">
		<div class="left">
			<ons-toolbar-button onclick="fn.open()">
				<ons-icon id="menuBarButtonpg6" icon="md-menu"></ons-icon>
			</ons-toolbar-button>
		</div>

		<div class="center" id="Tab6Title">Tab 6</div>
	</ons-toolbar>



</ons-page>
		
	</ons-page>
</template>

<template id="tab8.html">
	<ons-page id="pgtab8.html">
	
		<ons-page id="pgTab8">
	<ons-toolbar id="Tab8">
		<div class="left">
			<ons-toolbar-button onclick="fn.open()">
				<ons-icon id="Tab8Icon" icon="md-menu"></ons-icon>
			</ons-toolbar-button>
		</div>
		
		<div class="center" id="Tab8Title">Tab 8</div>
	</ons-toolbar>




</ons-page>
		
	</ons-page>
</template>
<script>document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
	if (cordova.platformId == 'android') {
StatusBar.backgroundColorByHexString("#C60C1C");
	}

cordova.plugins.backgroundMode.enable();

cordova.plugins.backgroundMode.setDefaults({
title: '<!-- AppName -->',
text: 'My Amazing Application',
icon: 'icon',
color: 'C60C1C',
resume: True,
hidden: False,
bigText: True
})

cordova.plugins.backgroundMode.on('activate', function() {
cordova.plugins.backgroundMode.disableWebViewOptimizations(); 
});

}


/*    Element = function (el) { return document.getElementById(el) };      */

BabelFish = {};
BabelFish.Element = function (el) { return document.getElementById(el); };
BFElement = function(el) { return BabelFish.Element(el); };

BabelFish.Blur = function () {
let el = document.querySelector( ':focus' );
if( el ) el.blur();
}

window.fn = {};

window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};

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

function change(page)
{
var myNavigator = document.getElementById('pushpage_navigator');
myNavigator.pushPage(page);
}


function search1_SearchFor(SearchTerm) {
ons.notification.alert(SearchTerm);
BabelFish.Blur();
}


function miwa_onclick() {
	change('tab4.html');
}

function disableMenus() {

   if (document.addEventListener) {
            document.addEventListener('contextmenu', function (e) {
                e.preventDefault();
            }, false);
        } else {
            document.attachEvent('oncontextmenu', function () {
                window.event.returnValue = false;
            });
        }
}

disableMenus();










</script></body>
</html>