index.html

<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta name="author" content="Abdel Halim Bouguedra">
        <meta name="viewport" content="width=device-width minimum-scale=1 maximum-scale=1">
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        
    </head>

    <body>
    	<div id="display" class="display"><span style="font-size: 150%;">♪</span></div>
      <div id="frequency" class="frequency"></div>
      <canvas id="canvas" class="cnv"></canvas>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
          </filter>
        </defs>
      </svg>

	  	<!-- link to the source code repo -->
		<a href="https://github.com/halimb/simple-tuner/blob/master/script.js" target="_blank">
			<div title="Source code" style="position: absolute; right: 20px; bottom: 20px; height: 25px; width: 25px; padding: 10px; border-radius: 50%; background: #f76; cursor: pointer; font-size: 20px; text-align: center; vertical-align: middle; color: black; font-family: Arial; line-height: 20px; z-index: 100;">
				 {&nbsp;}
			</div>
		</a>
		<!--  -->

    	<canvas id="visualization" class="visualization"></canvas>
        <script src="lib/wad.js"></script>
        <script src="script.js"></script>
    </body>

</html>