<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <!-- Web3js -->
    <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.34/dist/web3.min.js"></script>
    
    <!-- Portis -->
    <script src="https://cdn.jsdelivr.net/npm/portis/dist/bundle.min.js"></script>

  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <script>
        var PortisProvider = window.Portis.PortisProvider;

      // Check if Web3 has been injected by the browser (Mist/MetaMask)
        if (typeof web3 !== 'undefined') {
            // Use Mist/MetaMask's provider
            web3js = new Web3(web3.currentProvider);
        } else {
            // Fallback - use Portis
            web3js = new Web3(new PortisProvider({
                apiKey: "eb57240994af9de4ee621d0290a0e75a",
                network: 'ropsten'
            }));
        }
        
        web3js.eth.getAccounts((error, accounts) => {
          document.write('account: ', accounts[0]);
        });
    </script>
  </body>

</html>
// Code goes here

/* Styles go here */