<!DOCTYPE html>
<html>
<head>
  <title></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();</script>
  

<style></style>
</head><body><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>

<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 onclick="login()">Login</ons-button>
    </p>
</div><script></script></body>
</html>