
<script>
var login = function() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;

if (username === 'bob' && password === 'secret') {
ons.notification.alert('Congratulations!');
const navigator = document.querySelector('#navigator');
navigator.resetToPage('index.html');
} else {
ons.notification.alert('Incorrect username or password.');
}
};
</script>

<ons-navigator id="navigator">
<ons-page>

<div class="content" id="content">

<section style="padding: 8px">
</br></br></br>
<center> <img src=
"https://i0.wp.com/www.combatti.org/wp-content/uploads/2018/06/slogo-site.png?fit=374%2C374&ssl=1" style="width: 128px"></img>
</center>
<div style="text-align: center; margin-top: 30px;">
<p>
<ons-input id="username" modifier="underbar" placeholder="Username" float></ons-input>
</p>
<p>
<ons-input id="password" modifier="underbar" type="password" placeholder="Password" float></ons-input>
</p>
<p style="margin-top: 30px;">

<ons-button modifier="large" onclick="login()">Login</ons-button></br>
<ons-button onclick="">Sign Up</ons-button>

</br>
<ons-button modifier="large--quiet" onclick="">Forgot Password</ons-button>

</div>
</section>

<center><small><div style="position: absolute; width: 100%; bottom: 5px">
<p>Copyright © 2019. Combatti.org. </p>
<p>All Rights Reserved.</p>

</div></small></center>

</div>

</ons-page>
</ons-navigator>



<script>
if (typeof(Storage) !== "undefined") {
  //alert("ready");
} else {
  alert("Sorry! No Web Storage support.");
}

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));
};



</script>


<template id="index.html">
<ons-page>


	  <ons-toolbar>
    <div class="left">
     	<ons-toolbar-button onclick="fn.open();"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>

    </div>
<div class="center" id="mainmenubar">Wallet</div>
  </ons-toolbar>



<ons-splitter>
  <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('home.html'); $( '#mainmenubar' ).html('Wallet');" tappable>
          Wallet

        </ons-list-item>
        <ons-list-item onclick="fn.load('settings.html');$( '#mainmenubar' ).html('Settings');" tappable>
          Settings
        </ons-list-item>
        <ons-list-item onclick="fn.load('about.html'); $( '#mainmenubar' ).html('About');" tappable>
          About
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>

</ons-page>
</template>

<template id="home.html">
  <ons-page>

	<ons-card style="text-align: center;">
    <img src=
"https://i0.wp.com/www.combatti.org/wp-content/uploads/2018/06/slogo-site.png?fit=374%2C374&ssl=1" alt="Combatti.org Logo" style="width: 50%">
    <div class="title" style="text-shadow: 2px 2px 4px #000000;">
      Awesome Framework
    </div>
    <div class="content">
<center>
      <div>

        <ons-button><ons-icon icon="fa-paper-plane"> Send</ons-icon></ons-button>
        <ons-button><ons-icon icon="fa-exchange-alt"> Recieve</ons-icon></ons-button>
      </div>
</center></br>
      <ons-list>
        <ons-list-header>Bindings</ons-list-header>
        <ons-list-item>Vue</ons-list-item>
        <ons-list-item>Angular</ons-list-item>
        <ons-list-item>React</ons-list-item>
      </ons-list>
    </div>
  </ons-card>

   </ons-page>
</template>

<template id="settings.html">

  <ons-page>

    <h2>Settings</h2>
    
	CONTENT

   </ons-page>
</template>

<template id="about.html">
  <ons-page>

    <h2>About</h2>
    <div class="center">
        Enable cool feature
      </div>
      <div class="right">
        <ons-switch checked></ons-switch>
      </div>
<ons-fab position="bottom right" onclick="showTemplateDialog();">+</ons-fab>

   </ons-page>
</template>


<script>
var showTemplateDialog = function() {
  var dialog = document.getElementById('my-dialog');

  if (dialog) {
    dialog.show();
  } else {
    ons.createElement('dialog.html', { append: true })
      .then(function(dialog) {
        dialog.show();
      });
  }
};

var hideDialog = function(id) {
  document
    .getElementById(id)
    .hide();
};
</script>


<template id="dialog.html">
  <ons-dialog id="my-dialog">
    <div style="text-align: center; padding: 10px;">
      <p>
       <label class="left">
        <ons-checkbox input-id="check-1"></ons-checkbox>
</label>
    <label for="check-1" class="center">
        Apple
    </label>
      </p>

      <p>
        <ons-button onclick="hideDialog('my-dialog')">Close</ons-button>
      </p>
    </div>
  </ons-dialog>
</template>