examples/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<title>HashIcon</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link href="https://fonts.googleapis.com/css?family=Rubik:400,500" rel="stylesheet">
	<link href="style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
	<script src="../dist/hashicon.umd.js"></script>
</head>
<body>

	<!--Logo-->
	<section id="logo">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
			<style>fill:none; stroke-width:1.745px; stroke: #222;</style>
		  <path class="st0" d="M32 8L8 20v24l24 12 24-12V20zM32 8v48M20 14v36M44 14v36M8 20l48 24M56 20L8 44M44 14L8 32M56 32L20 50M20 14l36 18M8 32l36 18"/>
		</svg>

		<h1>HashIcon</h1>
	</section>


	<!--Intro-->
	<section>
		<p>HashIcon generates a visual representation of a hash value. Adding visual identifiers will make the user experience much more enjoyable. HashIcon is made with love for Ethereum Classic - but simple to use for any kind of hashes. Its visualy highly customizable to fit your project's style.</p>
		<p>Get the latest version from <a href="http://github.com/ETCDEVTeam/hashicon">Github</a>. </p></p>
	</section>

	<!--example input field + single canvas hashicon-->
	<section id="input">
		<h1>Paste a hash to see your HashIcon</h1>
		<div><input type="text" id="hashInput" value="0xdc53525847b67a9e32d80066202d5744c86ae500"></div>
		<div id="canvasContainer"></div>
	</section>


	<!--random hash examples-->
	<section id="example_big"><h1>big</h1></section>
	<section id="example_medium"><h1>medium</h1></section>
	<section id="example_small"><h1>small</h1></section>


	<!-- footer -->
	<section id="footer">
		<p><a href="info.html">privacy policy & contact</a> &nbsp;&nbsp;&nbsp; 2018 by scco @ etcdev</p>
	</section>


	<script>
		/**
		 * Generate a random hash for testing
		 * @return {String} Hash
		 */
    function randomHash() {
        return '0x' + (function lol(m, s, c) {
            return s[m.floor(m.random() * s.length)] + (c && lol(m, s, c - 1));
        })(Math, '0123456789abcdef', 38)
    }

    /**
     * Generate test canvases
     * @param  {String} parentId contrainer node id
     * @param  {Number} length   Number of items
     * @param  {Number} size     icon size
     */
    function generateCanvas(parentId, length, size) {
    	const parent = document.getElementById(parentId);
      Array.from({length}).forEach(() => {
      	parent.append(hashicon(randomHash(), size));
      });
    }

    generateCanvas("example_big", 14, 140);
    generateCanvas("example_medium", 50, 80);
    generateCanvas("example_small", 150, 44);


    /**
     * HASH INPUT
     */
    const canvasContainer = document.getElementById("canvasContainer");
    const hashInput = document.getElementById('hashInput');
    hashInput.addEventListener('input', (event) => {
    	if (canvasContainer.firstChild) canvasContainer.firstChild.remove();
    	canvasContainer.appendChild(hashicon(event.target.value, 240));
    });
    hashInput.dispatchEvent(new Event("input"));	// trigger on load

	</script>
</body>
</html>