tools.html

<script src="web3.min.js"></script>
<script>
 

 function getLocation() {
   if (navigator.geolocation) {
     navigator.geolocation.watchPosition(showPosition);
   } else {
     document.getElementById("gps").innerHTML = "Geolocation is not supported by this browser.";
   }
 }
 function showPosition(position) {
  document.getElementById("gps").innerHTML = position.coords.latitude +  " : " + position.coords.longitude;
  //var y = document.getElementById("distance");
  //y.innerHTML = 'R House: ' + getDistanceFromLatLonInKm(rhouse_lat,rhouse_lon,position.coords.latitude,position.coords.longitude).toFixed(1) + ' km'; 
 }

 
 
window.onload=function(){ 
 web3 = new Web3(web3.currentProvider);
 
 const unlockButton = document.querySelector('.unlockButton');
 
 unlockButton.addEventListener('click', () => {
  getAccount();
  getLocation();
});
 
 
 
 async function getAccount() {
   
 
  
 // document.getElementById('unlock').style.visibility = 'hidden';
  
  
 const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
 const account = accounts[0];
 document.getElementById('mm').innerText = account.toString();
 let tokenAddress = '0xbdd4f273c2b0f0b84a51bd733aac617d91159376';
  let minABI = [
        // balanceOf
        {
          "constant":true,
          "inputs":[{"name":"_owner","type":"address"}],
          "name":"balanceOf",
          "outputs":[{"name":"balance","type":"uint256"}],
          "type":"function"
        },
        // decimals
        {
          "constant":true,
          "inputs":[],
          "name":"decimals",
          "outputs":[{"name":"","type":"uint8"}],
          "type":"function"
        }
      ];

      let contract = web3.eth.contract(minABI).at(tokenAddress);
      contract.balanceOf(account, (error, balance) => {
        contract.decimals((error, decimals) => {
          balance = balance.div(10**decimals);
          console.log(balance.toString());
          document.getElementById('balt').innerText = balance.toString();
        });
      });
} 
}
</script>
<style>
 @media (min-width:1025px) { .container { width: 50% !important;} }
</style>
<center>
<div class="container">
  <center>    
    <div class="row" style='text-align:left;'>
      <h3>This is our collection of Web 3.0 ERC-20 Tools coded specificly for $BALT.</h3>
     <p>You will need to connect <u>MetaMask <a id='mm'></a> <a id='balt'></a> <b>and</b> Enable GPS</u> <a id='gps'></a> to <i>unlock features</i>.</p>
      <button id='unlock' class="unlockButton">Unlock Features</button>

     <ol>
      <li>Event Map <a href="/tools/events">CLICK</a></li>
      <li>Batch Send $BALT <a href="/tools/bulksender">CLICK</a></li>
      <li>Check Balance <a href="/tools/metamask">CLICK</a></li>
      <li>Block Explorer <a href="/tools/explorer">CLICK</a></li>
      </ol>
     
     <!-- if $BALT over 99 and GPS active -->
     <h3>During Development ( next day or two ) you may be able to add events for FREE</h3>
     <form id='new_event' name='event_form' class='event' method='POST' action='https://www.bmorecoin.com/new_event.php'>
     [Hello Form!]
     </form>
       </div>
  </center>
</div>