index.html

<h3>superhero-utils example using plain js</h3>

Other examples:
<a href="./react-unpkg.html">react unpkg</a>,
<a href="./react-webpack/build/">react webpack</a>,
<a href="./vue-unpkg.html">vue unpkg</a>,
<a href="./vue-webpack/dist/">vue webpack</a>

<hr>
<div class="icon">Donate</div>
<div class="small">Donate</div>
<div class="medium">Donate</div>
<div class="large">Donate</div>

<hr>
<button class="ensure-paid">Ensure paid</button>
<button class="reset-paid-state">Reset paid state</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in ligula sit amet libero blandit laoreet luctus scelerisque eros. Donec nunc tortor, condimentum eu imperdiet ac, ornare ac leo. Nullam non nulla non massa hendrerit tempus. Donec imperdiet euismod lacus eu commodo. In pellentesque ipsum sed mi iaculis vestibulum. Mauris quis blandit est. Ut lacinia quam sit amet dapibus pellentesque. Donec pretium at erat sed elementum.</p>
<p>Cras vitae erat at sapien pretium scelerisque at a odio. Aenean pulvinar tellus sit amet posuere porta. Sed vel efficitur nisl, a sollicitudin enim. Quisque eu velit id leo interdum ultrices. Nam vulputate lectus nec neque efficitur lobortis. In vehicula leo id ligula varius, ac lobortis lorem dictum. Proin dignissim lobortis massa, non facilisis nisi auctor vel. Praesent eget molestie mauris, vel vehicula velit. In hac habitasse platea dictumst. Aenean molestie blandit pulvinar.</p>
<p>Vestibulum finibus sagittis nulla nec scelerisque. Duis libero dui, viverra vitae ipsum sit amet, congue lacinia lorem. Etiam porta quis nisi ut consequat. In hac habitasse platea dictumst. Nunc dapibus condimentum tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse non erat vitae velit semper elementum. Donec eleifend dictum dui, in ultrices nisi lobortis id. Integer sit amet luctus mauris. Vivamus a lacus non augue pulvinar dapibus in a neque. Morbi semper convallis justo quis aliquam. Cras at blandit felis, at porta magna. Maecenas egestas purus purus, vel fringilla massa iaculis eu. In at eleifend quam. Nulla vitae metus ex. Nunc eu augue ut sem tincidunt volutpat vitae ac orci.</p>
<p>Sed eu convallis nisi. Proin aliquam diam eget risus venenatis pharetra. Sed varius commodo mauris eu accumsan. Donec erat tellus, vestibulum in efficitur non, aliquet eu leo. Aenean bibendum risus leo, ac consequat urna gravida ut. Proin ut justo eget ligula tempor euismod. Sed nec dui at est tristique ultrices et eu massa.</p>
<p>Suspendisse ut tempus nibh. Fusce placerat neque lacinia mi mattis hendrerit. Phasellus blandit sit amet nibh sed molestie. Praesent vulputate imperdiet mauris vitae lobortis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris in tellus lacinia, imperdiet diam sit amet, porta nisl. In vehicula in elit ac dignissim. Curabitur vehicula sollicitudin molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec convallis non odio a commodo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in ligula sit amet libero blandit laoreet luctus scelerisque eros. Donec nunc tortor, condimentum eu imperdiet ac, ornare ac leo. Nullam non nulla non massa hendrerit tempus. Donec imperdiet euismod lacus eu commodo. In pellentesque ipsum sed mi iaculis vestibulum. Mauris quis blandit est. Ut lacinia quam sit amet dapibus pellentesque. Donec pretium at erat sed elementum.</p>
<p>Cras vitae erat at sapien pretium scelerisque at a odio. Aenean pulvinar tellus sit amet posuere porta. Sed vel efficitur nisl, a sollicitudin enim. Quisque eu velit id leo interdum ultrices. Nam vulputate lectus nec neque efficitur lobortis. In vehicula leo id ligula varius, ac lobortis lorem dictum. Proin dignissim lobortis massa, non facilisis nisi auctor vel. Praesent eget molestie mauris, vel vehicula velit. In hac habitasse platea dictumst. Aenean molestie blandit pulvinar.</p>
<p>Vestibulum finibus sagittis nulla nec scelerisque. Duis libero dui, viverra vitae ipsum sit amet, congue lacinia lorem. Etiam porta quis nisi ut consequat. In hac habitasse platea dictumst. Nunc dapibus condimentum tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse non erat vitae velit semper elementum. Donec eleifend dictum dui, in ultrices nisi lobortis id. Integer sit amet luctus mauris. Vivamus a lacus non augue pulvinar dapibus in a neque. Morbi semper convallis justo quis aliquam. Cras at blandit felis, at porta magna. Maecenas egestas purus purus, vel fringilla massa iaculis eu. In at eleifend quam. Nulla vitae metus ex. Nunc eu augue ut sem tincidunt volutpat vitae ac orci.</p>
<p>Sed eu convallis nisi. Proin aliquam diam eget risus venenatis pharetra. Sed varius commodo mauris eu accumsan. Donec erat tellus, vestibulum in efficitur non, aliquet eu leo. Aenean bibendum risus leo, ac consequat urna gravida ut. Proin ut justo eget ligula tempor euismod. Sed nec dui at est tristique ultrices et eu massa.</p>
<p>Suspendisse ut tempus nibh. Fusce placerat neque lacinia mi mattis hendrerit. Phasellus blandit sit amet nibh sed molestie. Praesent vulputate imperdiet mauris vitae lobortis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris in tellus lacinia, imperdiet diam sit amet, porta nisl. In vehicula in elit ac dignissim. Curabitur vehicula sollicitudin molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec convallis non odio a commodo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in ligula sit amet libero blandit laoreet luctus scelerisque eros. Donec nunc tortor, condimentum eu imperdiet ac, ornare ac leo. Nullam non nulla non massa hendrerit tempus. Donec imperdiet euismod lacus eu commodo. In pellentesque ipsum sed mi iaculis vestibulum. Mauris quis blandit est. Ut lacinia quam sit amet dapibus pellentesque. Donec pretium at erat sed elementum.</p>
<p>Cras vitae erat at sapien pretium scelerisque at a odio. Aenean pulvinar tellus sit amet posuere porta. Sed vel efficitur nisl, a sollicitudin enim. Quisque eu velit id leo interdum ultrices. Nam vulputate lectus nec neque efficitur lobortis. In vehicula leo id ligula varius, ac lobortis lorem dictum. Proin dignissim lobortis massa, non facilisis nisi auctor vel. Praesent eget molestie mauris, vel vehicula velit. In hac habitasse platea dictumst. Aenean molestie blandit pulvinar.</p>
<p>Vestibulum finibus sagittis nulla nec scelerisque. Duis libero dui, viverra vitae ipsum sit amet, congue lacinia lorem. Etiam porta quis nisi ut consequat. In hac habitasse platea dictumst. Nunc dapibus condimentum tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse non erat vitae velit semper elementum. Donec eleifend dictum dui, in ultrices nisi lobortis id. Integer sit amet luctus mauris. Vivamus a lacus non augue pulvinar dapibus in a neque. Morbi semper convallis justo quis aliquam. Cras at blandit felis, at porta magna. Maecenas egestas purus purus, vel fringilla massa iaculis eu. In at eleifend quam. Nulla vitae metus ex. Nunc eu augue ut sem tincidunt volutpat vitae ac orci.</p>
<p>Sed eu convallis nisi. Proin aliquam diam eget risus venenatis pharetra. Sed varius commodo mauris eu accumsan. Donec erat tellus, vestibulum in efficitur non, aliquet eu leo. Aenean bibendum risus leo, ac consequat urna gravida ut. Proin ut justo eget ligula tempor euismod. Sed nec dui at est tristique ultrices et eu massa.</p>
<p>Suspendisse ut tempus nibh. Fusce placerat neque lacinia mi mattis hendrerit. Phasellus blandit sit amet nibh sed molestie. Praesent vulputate imperdiet mauris vitae lobortis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris in tellus lacinia, imperdiet diam sit amet, porta nisl. In vehicula in elit ac dignissim. Curabitur vehicula sollicitudin molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec convallis non odio a commodo.</p>

<script src="./superhero-utils/index.js"></script>
<script>
/*
* Create superhero button instance by pointing element with its selector
*/
superheroUtils.createButton('.icon', { size: 'icon', account: 'ak_... or .chain name' });
superheroUtils.createButton('.small', { size: 'small', account: 'ak_... or .chain name' });
superheroUtils.createButton('.medium', { size: 'medium', account: 'ak_... or .chain name' });

/*
* Create superhero button instance by passing DOM element instance
*/
superheroUtils.createButton(document.querySelector('.large'), { size: 'large', account: 'ak_... or .chain name' });

// Initialize button a.superhero-tip-button appears dynamically
setTimeout(function() {
  var btn = document.createElement("div");
  document.body.appendChild(btn);
  superheroUtils.createButton(btn);
}, 5000);

document.querySelector('.ensure-paid')
    .addEventListener('click', () => superheroUtils.ensurePaid());

document.querySelector('.reset-paid-state')
    .addEventListener('click', () => delete localStorage['superhero-paywall-paid-urls']);
</script>