index.html

<html>
    <head>
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-128960601-1"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
    
            gtag('config', 'UA-128960601-1');
        </script>
    
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <!-- HTML Meta Tags -->
        <title>BigBit standard</title>
        <meta name="description" content="a standard for numeric data and character encoding">
        <meta name="author" content="Amit Kumar Gupta">

        <!-- Google / Search Engine Tags -->
        <meta itemprop="name" content="BigBit standard">
        <meta itemprop="description" content="a standard for numeric data and character encoding">
        <meta itemprop="image" content="static/img/pi.png">

        <!-- Facebook Meta Tags -->
        <meta property="og:url" content="https://bigbit.github.io/bigbitjs">
        <meta property="og:type" content="website">
        <meta property="og:title" content="BigBit standard">
        <meta property="og:description" content="a standard for numeric data and character encoding">
        <meta property="og:image" content="static/img/pi.png">

        <!-- Twitter Meta Tags -->
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:title" content="BigBit standard">
        <meta name="twitter:description" content="a standard for numeric data and character encoding">
        <meta name="twitter:image" content="static/img/pi.png">

        <!-- Meta Tags Generated via http://heymeta.com -->

        <link href="static/css/bootstrap.min.css" rel="stylesheet">

        <script src="static/js/jquery-3.2.1.min.js"></script>
        <script src="static/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="fluid-container " style="text-align: center; color:white; background: #4d4d4d; padding: 20px 0;">
            <div class="row align-items-center" style="height: 20vh; ">
                <div class="col-md-12">
                    <h1>Big Bit</h1>
                    <input type="text" id="input_text" style="width: 80%">
                    <button id="convert">convert</button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <input id="num_choice" type="radio" name="input_type" value="num" checked> Number
                </div>
                <div class="col-md-6">
                    <input id="str_choice" type="radio" name="input_type" value="str"> Text
                </div>
            </div>
            <!-- 
                If number is provided then show following information
            -->
        </div>
        <div class="fluid-container ">
            <num_display id="num_section"></num_display>
            <str_display id="str_section"></str_display>
            <example id="example_section"></example>
        </div>
        <cookie-alert></cookie-alert>

        <script src="dist/bigbit.js"></script>
        <script src="static/js/ieee754.js"></script>
        <script src="static/js/riot.min.js"></script>
        <script src="static/js/riot+compiler.min.js"></script>
        <script src="static/js/convert.js"></script>

        <script src="static/tags/num_display.tag.html" type="riot/tag"></script>
        <script src="static/tags/str_display.tag.html" type="riot/tag"></script>
        <script src="static/tags/example.tag.html" type="riot/tag"></script>
        <script src="static/tags/cookie-alert.tag.html" type="riot/tag"></script>

        <script type="text/javascript">
            riot.mount("cookie-alert");
            $(document).ready(function(){
                var q = new URLSearchParams(window.location.search);
                if( q.get('text') ){
                    $('#input_text').val(q.get('text'));
                    $('#str_choice').prop('checked',true);
                    strPage = riot.mount("str_display", { input: q.get('text'), display: true});
                    $("#num_section").hide();
                }else if( q.get('num') ){
                    $('#input_text').val(q.get('num'));
                    $('#num_choice').prop('checked',true);
                    strPage = riot.mount("num_display", { input: q.get('num'), display: true});
                    $("#str_section").hide();
                }else{
                    var exampleTag = riot.mount("example", { display: true});
                    
                }
                $(document).keyup( function(e){
                    if(e.keyCode === 13){
                        convert();
                    }
                });
                $('#convert').click( function(){
                    convert();
                })
            });

            function convert(){
                riot.mount({ display: false});
                $("#example_section").hide();
                //validate input
                var inputData = $("#input_text").val();
                var type = $("input[name=input_type]:checked").val();

                var numPage, strPage;

                if(type === 'num'){
                    numPage = riot.mount("num_display", { input: inputData, display: true});
                    $("#str_section").hide();
                }else{
                    strPage = riot.mount("str_display", { input: inputData, display: true});
                    $("#num_section").hide();
                }
            }
        
        </script>
    </body>
</html>