index.html

<!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <title>Byte Counter</title>
        <meta name="description" content="">
        <script src="https://cdn.rawgit.com/brython-dev/brython/master/www/src/brython.js"></script>
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <!-- bootstrap stuff -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <style>

            body { margin-left: 10px; margin-top: 10 px; }

        </style>
    </head>
    <body onload="brython()">
        <h2>See the project on <a href="https://github.com/Mego/ByteCounter">GitHub</a>!</h2>
        <br>
        <textarea id="text" style="font-family:monospace"></textarea>
        <br>
        <button type="button" class="btn btn-xs btn-default" id="submit">Count</button>
        <br>
        <h4>Byte count(s):</h4>
        <div id="counts">
        
        </div>
        <script type="text/python" src="counter.py"></script>
    </body>
</html>