nuuneoi/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DApp Tutorial</title>

    <style>
      body {
          background-color:#F0F0F0;
          padding: 2em;
          font-family: 'Raleway','Source Sans Pro', 'Arial';
      }
      .container {
          width: 50%;
          margin: 0 auto;
      }
      label {
          display:block;
          margin-bottom:10px;
      }
      input {
          padding:10px;
          width: 50%;
          margin-bottom: 1em;
      }
      button {
          margin: 2em 0;
          padding: 1em 4em;
          display:block;
      }

      #balance {
        padding:1em;
        background-color:#fff;
        margin: 1em 0;
      }

      #status {
        font-weight:normal;
        font-family: monospace;
        padding:1em;
        background-color:#fff;
        margin: 1em 0;
      }
    </style>
  </head>
  <body>
    <!-- Form -->
    <div class="container">
        <h1>dApp Basic Example</h1>
        <h2 id="balance">Current Balance = <span id="currentBalance"></span></h2>
        <button id="button" style="display: block" onclick="javascript:getBalance()">Get New Balance</button>
        <hr/>
        <br/>
        <label for="newBalance" class="col-lg-2 control-label"><strong>New Balance</strong></label>
        <input id="newBalance" type="number" value="0" style="display: inline-block">
        <button id="button" style="display: inline-block" onclick="javascript:setBalance()">Set New Balance</button>
        <br/>
        <br/>
        <label><strong>Status</strong></label>
        <h4 id="status"></h4>
    </div>
  </body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
  <script>
    function addStatusLine(text) {
      document.getElementById("status").innerHTML = text + "<br/><br/>" + document.getElementById("status").innerHTML;
    }

    function getBalance() {
      addStatusLine("");
      addStatusLine("calling getBalance()");
      // TODO: Call getBalance Smart Contract
    }

    function setBalance() {
      // TODO: Call setBalance Smart Contract
    }

    // Initializing
    if (typeof web3 !== 'undefined') {
      web3 = new Web3(web3.currentProvider);
    }

    // Get default address
    web3.eth.defaultAccount = web3.eth.accounts[0];

    // TODO: Replace your SimpleContract abi here
    var abi = [];
    // TODO: Replace your SimpleContract contract address here
    var contractAddress = '';

    // Create an interface to SimpleContract on TomoChain
    var SimpleContractContract = web3.eth.contract(abi);
    var SimpleContract = SimpleContractContract.at(contractAddress);

    // Get Balance on the first load
    getBalance();
  </script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>DApp Tutorial</title>

	<style>
	body {
	background-color:#F0F0F0;
	padding: 2em;
	font-family: 'Raleway','Source Sans Pro', 'Arial';
	}
	.container {
	width: 50%;
	margin: 0 auto;
	}
	label {
	display:block;
	margin-bottom:10px;
	}
	input {
	padding:10px;
	width: 50%;
	margin-bottom: 1em;
	}
	button {
	margin: 2em 0;
	padding: 1em 4em;
	display:block;
	}

	#balance {
	padding:1em;
	background-color:#fff;
	margin: 1em 0;
	}

	#status {
	font-weight:normal;
	font-family: monospace;
	padding:1em;
	background-color:#fff;
	margin: 1em 0;
	}
	</style>
	</head>
	<body>
	<!-- Form -->
	<div class="container">
	<h1>dApp Basic Example</h1>
	<h2 id="balance">Current Balance = <span id="currentBalance"></span></h2>
	<button id="button" style="display: block" onclick="javascript:getBalance()">Get New Balance</button>
	<hr/>
	<br/>
	<label for="newBalance" class="col-lg-2 control-label"><strong>New Balance</strong></label>
	<input id="newBalance" type="number" value="0" style="display: inline-block">
	<button id="button" style="display: inline-block" onclick="javascript:setBalance()">Set New Balance</button>
	<br/>
	<br/>
	<label><strong>Status</strong></label>
	<h4 id="status"></h4>
	</div>
	</body>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
	<script>
	function addStatusLine(text) {
	document.getElementById("status").innerHTML = text + "<br/><br/>" + document.getElementById("status").innerHTML;
	}

	function getBalance() {
	addStatusLine("");
	addStatusLine("calling getBalance()");
	// TODO: Call getBalance Smart Contract
	}

	function setBalance() {
	// TODO: Call setBalance Smart Contract
	}

	// Initializing
	if (typeof web3 !== 'undefined') {
	web3 = new Web3(web3.currentProvider);
	}

	// Get default address
	web3.eth.defaultAccount = web3.eth.accounts[0];

	// TODO: Replace your SimpleContract abi here
	var abi = [];
	// TODO: Replace your SimpleContract contract address here
	var contractAddress = '';

	// Create an interface to SimpleContract on TomoChain
	var SimpleContractContract = web3.eth.contract(abi);
	var SimpleContract = SimpleContractContract.at(contractAddress);

	// Get Balance on the first load
	getBalance();
	</script>
	</html>