{HTML(align="left" float="right")}
<noscript>Die Anwendung baut auf Javascript auf. Ermöglichen Sie Ihrem Browser JavaScript auszuführen (Settíngs), sonst startet die Anwendung nicht.</noscript>
<span id="container" name="container" class="rounded">
  <table class="border border-primary" style="margin: 5px;height:280px;width:100%;">
    <tr>
      <td>
        <p style="margin:10px 10px 10px 0px;"> </p>
        <img style="float:left;height:270px;width:auto;margin:0px 15px 15px 0px;" name="avat" id="avat" src="https://steemwiki.org/show_image.php?id=39"><input style="display:inline;" class="form-control" type="text" v-model.lazy="user" placeholder="Steem–Namen ohne @ eingeben" /><br /><br />
<span id="helper" name="helper" style="display:inline;">Name zB. ned, steemwiki oder afrog!</span><br /><br />
<span id="anzeig" name="anzeig" style="display:inline;"></span>
      </td>
      <td></td>
    </tr>
    <tr>
      <td>
      </td>
      <td></td>
    </tr>
    <tr>
      <td>
        <div class="btn-group" role="group" aria-label="Basic example">
        <button id="stedit" name="stedit" type="button" class="btn btn-success rounded disabled">Editor</button>
        <button id="gostworld" name="gostworld"type="button" class="btn btn-success rounded">Steemworld</button>
        <button id="stblog" name="stblog" type="button" class="btn btn-success rounded">Steemit</button>
        <button id="boers" name="boers" type="button" class="btn btn-danger rounded disabled">Börse</button>
        <button id="notiz" name="notiz" type="button" class="btn btn-success rounded disabled">Notizen</button>
        <button id="deutsch" name="deutsch" type="button" class="btn btn-success rounded disabled">deutsch</button>
        <button id="tricky" name="tricky" type="button" class="btn btn-warning rounded disabled">Tricky</button>
      </div>
      </td>
      <td></td>
    </tr>
  </table>
  <br />
  <span id="about" name="about"></span><br />
  <span id="tablett" name="tablett" style="max-width:600px;height:auto;"><img style="float:left;margin:0px 15px 15px 10px;" name="covimg" id="covimg" src=""></span><br /><br />
</span>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script>
  {
  let vm = new Vue({
    el: '#container',
    data: {
      user: '',
      userData: {
      profile_image: "",
      about: "",
      cover_image:"",
      location:"",
      website:"",
      level: 0,
      xp: 0,
      power: 0
      }
    },
    watch: {
      user: function (u) {
        setDefaultUserProfilePic()
        refreshAccountData(u)
      }
    }
  });
  function calcLevel(v) {
    return Math.floor(calcReputation(v))
  }
  function calcXP(v) {
    let r = calcReputation(v);
    return 100 * (r - Math.floor(r))
  }
  function log10(str) {
    let $str = str.toString()
    const leadingDigits = parseInt($str.substring(0, 4))
    const log = Math.log(leadingDigits) / Math.log(10)
    const n = $str.length - 1
    return n + (log - parseInt(log))
  }
  function calcReputation(value) {
    if (value == null || value == 0) return 0;
    let neg = value < 0
    let reputation_level = log10(value) - 9;
    if (reputation_level < 0) reputation_level = 0;
    if (neg) reputation_level *= -1;
    return reputation_level * 9 + 25;
  }
  function setDefaultUserProfilePic() {
  document.getElementById("avat").src = "https://steemwiki.org/show_image.php?id=39"
  }
  function refreshAccountData(accountName) {
    return steem.api.getAccountsAsync([accountName])
    .then (function (result) {
      try {
      let profile = JSON.parse(result[0].json_metadata).profile;
      let thema = JSON.parse(result[0].json_metadata).profile.about;
      document.getElementById("about").innerHTML = ("<strong>"+accountName+"</strong>"+" schreibt über: "+thema);
      if (profile.profile_image != null) {
        document.getElementById("avat").src = (profile.profile_image);
        document.getElementById("covimg").src = (profile.cover_image);
        }
      }
      catch (err) {
        document.getElementById("avat").src = "https://steemwiki.org/show_image.php?id=39";
        alert('Das war kein Steem-Name.\nVersuche es noch einmal\nohne @!');
      	}


      document.getElementById("anzeig").innerHTML = '';
      vm.$set(vm.userData, 'level', calcLevel(result[0].reputation))
      vm.$set(vm.userData, 'xp', calcXP(result[0].reputation))
      vm.$set(vm.userData, 'power', result[0].voting_power / 100)
      vm.$set(vm.userData, 'id', result[0].id)
      vm.$set (vm.userData,'base_url')

      let vp = result[0].voting_power / 100;
      let rep = calcLevel(result[0].reputation);
      let avi =  result[0].id;
      let urlblog = "https://steemit.com/@"+accountName;
      let urlstworld = "https://steemworld.org/@"+accountName;

      document.getElementById('gostworld').onclick = function() {
      var winURL = urlstworld;
      var winName = 'win1';
      var winSize = 'width=660,height=620,scrollbars=yes';
      var ref = window.open(winURL, winName, winSize);
      }
      document.getElementById('stblog').onclick = function() {
      var winURL = urlblog;
      var winName = 'win2';
      var winSize = 'width=660,height=620,scrollbars=yes';
      var ref = window.open(winURL, winName, winSize);
      }
      document.getElementById("anzeig").insertAdjacentHTML('beforeend',"<p>"+"Steem–ID: "+avi+"</p>"+"<p>"+"akt. Votepower: "+vp+"</p>"+"<p>"+"Reputation: "+rep+"</p><br />");
    } /*Ende von refreshAccountData .Then*/
   )
      .catch(console.error)
  } /* Ende catchAccountData */
} /* Ende der ersten Klammer */
</script>
{HTML}