<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser-polyfill.min.js'></script>



  <script src="https://unpkg.com/@arianee/arianeejs@latest/browser/bundle.js">
  </script>
  
</head>
<body>

  <div class="centered">
    <div style='text-align:center' class="big_button">
      Write your own title</div><br/>
    <input id='title' name='title' value="My custom certificate" class="big_button" size="30"><br/>
    <button type="submit" onclick="start()" class="big_button" id="big_button">Create a custom Arianee Certificate</button>
    <div id="console"></div>
    <div id="loader"></div>
    <div id="qrcodediv" style="display:none">
      Please scan with Arianee Wallet<br/>
  <img id="qrcode"  width="200" height="200" />
    </div>
  </div>
</body>
</html>
img{
  image-rendering: pixelated;
}

.big_button {
  font-size: 20px!important;
}

.centered {
  position: relative;
  width: 100%;
  margin: auto;
}

#console, #qrcodediv {
  margin: auto;
  position: relative;
  width: auto;
  margin: auto;
  max-width: 250px;
  
  font-family: arial;
  
}

#qrcodediv {
  padding-top: 20px;
  text-align:center;
  font-weight: bold;
}
.show {
  display: block!important;
}

.hide {
  display: none!important;
  
}

#loader {
  margin-top: 20px;
  background: url('https://cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif');
  width: 48px;
  height: 48px;
  display:none;
}

#console li {
    padding-left: 20px;
    content: "\f2bc";
    background: url('https://img.icons8.com/material-outlined/24/000000/checked.png') no-repeat;
  background-size: 15px ;
}

.centered * {
  margin: auto!important;
  display: block
}
var certificateUrl;

// Create random wallet
async function createAsync() {
  

certificateUrl = "https://arian.ee/customCert?name="+document.getElementById('title').value;
  
var arianee = await new ArianeeLib.Arianee().init();
  
var wallet = arianee.fromPrivateKey('0x00000000000000000000000062108E293F3f337F94FdDE98Efe885338afFD74D');
  
_("Loading live demo wallet");
  
// Getting POA token for Gas
await wallet.requestPoa()
     .then(i => _("Getting POA"))
     .catch(i => _("Getting POA",false));

// Grab certificate content
var certificate = await fetch(certificateUrl);
var content = await certificate.json().then(i => {_("Getting certificate content"); return i;});

var certificateId;
var passphrase;
  
// Create a certificate based on a self hosted json  
await wallet.methods.createCertificate({
     uri: certificateUrl,
     content:content})      
     .then((i) => {
          _("Creating certificate");
  
          certificateId = i.certificateId;
          passphrase = i.passphrase;
  
          displayQRCode(certificateId,passphrase);
  
  
    })
     .catch(i => console.log("Creating certificate : error ", JSON.stringify(i)));
  
 
}


// Helper functions for live demo

function _(log,success=true) {
  
  var node = document.createElement("LI");                 // Create a <li> node
  var textnode = document.createTextNode(log);         // Create a text node
node.appendChild(textnode);                              // Append the text to <li>
  document.getElementById("console").appendChild(node);     // Append <li> to <ul> with id="myList"
  
  window.scrollTo(0,1000);
  
}

function displayQRCode(id,passphrase) {
  document.getElementById('qrcode').src='https://tools.arianee.org/qrcode.php?&chld=L&size=200x200&logo=https://demo.arianee.org/demo/logoa.png&data=https://test.arian.ee/'+id+','+passphrase;
  document.getElementById('qrcodediv').style='';
  document.getElementById('loader').classList.add('hide');
   window.scrollTo(0,1000);

}

function start() {
  var loader = document.getElementById("loader");
  loader.classList.add("show");
  
  var button = document.getElementById("big_button");
  button.classList.add("hide"); 
  createAsync();
} 

console.clear()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.