  <script>
 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>


<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!');
} else {
ons.notification.alert('Incorrect username or password.');
}
};
</script>

<ons-page>


<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>
</ons-page>
