index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Base64 encode/decode</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <h1>Base64<br/><sup>encode/decode</sup></h1>
    <div id="wrapper">
        <div id="source">
            <div id="dropMask">
                drop file here to encode
            </div>
            <div class="textarea-title">
                <label for="textInput">Text</label>
                 ( or <label class="link">choose file<input type="file" id="fileInput" /></label>
                 or <em>drag'n'drop</em> it ) :
            </div>
            <textarea id="textInput" onmouseover="this.focus();" spellcheck="false" autofocus="autofocus"></textarea>
        </div>
        <div id="ende">
            <span>encode »</span><br/><br/>
            <span>« decode</span>
        </div>
        <div id="base64">
            <div class="textarea-title">
                <label for="textBase64">Base64 String :</label>
            </div>
            <textarea id="textBase64" onmouseover="this.select();" spellcheck="false"></textarea>
        </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="base64.js"></script>
    <a id="fork-me-on-github" href="https://github.com/amio/base64">Fork me on GitHub</a>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-4646421-9', 'amio.github.io');
      ga('send', 'pageview');
    </script>
</body>
</html>