<!DOCTYPE html>
<html>

  <head>
    
    <!-- Please note that we use https://getmdl.io/components for quick and easy page 
         styling and for our client components. Look on their website to see how to use
         Material Design Lite -->
    
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>  
    <link rel="stylesheet" href="style.css"> 
    
    <!-- Please note how we hardcode the use of heat-sdk version, 0.3.3 in this case -->
    
    <script src="https://unpkg.com/heat-sdk@0.3.3/dist/heat-sdk.umd.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
      $(document).ready(function () {
        function generateNew() {
          var sdk = new heatsdk.HeatSDK()
          var secret = sdk.secretGenerator.generate()
          var publickey = sdk.crypto.secretPhraseToPublicKey(secret)
          var numeric = sdk.crypto.getAccountIdFromPublicKey(publickey)          
          $("#secret").text(secret)
          $("#public").text(publickey)
          $("#numeric").text(numeric)
        }
        generateNew()
        $("#btn").click(generateNew)
      })
    </script>
  </head>

  <body>
    <h3>HEAT-SDK | Generate account</h3>
    
    <h6>With heat-sdk we can generate cryptographically sercure private keys</h6>
    
    <div class="demo-card-wide mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">HEAT Paper Wallet</h2>
      </div>
      <div class="mdl-card__supporting-text">
        <small>Secret Phrase</small>
        <div class="bigger" id="secret"></div>
        <small>Public Key</small>
        <div class="bigger" id="public"></div>
        <small>Numeric Account ID</small>
        <div class="bigger" id="numeric"></div>
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" id="btn">
          Generate New
        </a>
      </div>
    </div>    
    
  </body>
</html>
body {
  padding: 10px;
}
.demo-card-wide.mdl-card {
  width: 512px;
}
.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 176px;
  background: url('https://btcmanager.com/wp-content/uploads/2016/08/LaunchOfHEAT.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
  color: #fff;
}
.bigger {
  font-size: 16px;
  margin-bottom: 8px;
}