index.html

<html lang="en-US" style="height: 100%;">

<head>
    <title>SJsquare - Code Game</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Keywords" content="CodeGame,Code Game,Code,Game,coding for kids,coding for beginners,learn to code,programming,development,training,learning">
    <link rel="icon" href="./images/SJsquare Logo.png">
    <style>
        html {
            box-sizing: border-box
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit
        }
    </style>
    <!-- Google Tag Manager -->
    <script>
        (function(w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime(),
                event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-KTCFC3S');
        var subjectFolder = location.pathname;
        subjectFolder = subjectFolder.replace("/", "");
        subjectFolder = subjectFolder.substr(0, subjectFolder.indexOf("/"));
    </script>
    <!-- End Google Tag Manager -->

    <link rel="stylesheet" href="css/codeGameUI.css">
    <link href="https://fonts.googleapis.com/css2?family=Freckle+Face&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script data-cfasync="false" type="text/javascript">
        window.snigelPubConf = {
            "adengine": {
                "activeAdUnits": []
            }
        }
    </script>
    <script async data-cfasync="false" src="https://cdn.snigelweb.com/adengine/w3schools.com/loader.js" type="text/javascript"></script>

    <body style="margin:0;">
        <!-- Google Tag Manager (noscript) -->
        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KTCFC3S"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
        <!-- End Google Tag Manager (noscript) -->

        <div style="background-color:#fff;height:80px;">
            <style>
                .mainheader {
                    position: absolute;
                    width: 100%;
                    text-align: center;
                    font-family: var(--codeGame-font-family-freckle-face);
                    font-style: var(--codeGame-font-style-normal);
                    font-weight: var(--codeGame-font-weight-normal);
                    font-size: var(--codeGame-font-size-32);
                    line-height: var(--codeGame-line-spacing-50);
                    letter-spacing: var(--codeGame-character-spacing-0);
                    color: var(--maincolour);
                    text-shadow: 1px 1px 0px var(--white);
                }

                #codeGameAd {
                    position: relative;
                    top: 100px;
                    text-align: center;
                    margin: auto;
                }

                @media(max-width:1024px) {
                    #codeGameAd {
                        margin-top: 200px;
                    }
                    .mainheader {
                        display: none;
                    }
                }
            </style>
            <h1 class="mainheader">Code Game - Sanket Jagtap</h1>
            <a href="https://sanketjagtap15.github.io/" target="_blank" style="z-index:9;position:absolute;">
      <img src="images/SJsquare Logo.png" style="width:80px;margin:16px;margin-left:30px;">
    </a>

        </div>
        <!-- CODEGAME START -->
        <div class="codeGame-main" id="codeGame-main">
            <div class="codeGame-render" id="codeGame-render">
            </div>
            <div class="codeGame-control">
                <div id="codeGame-messagebox" class="codeGame-control-sidebar codeGame-messagebox-container" style="display: none;">
                    <div class="codeGame-messagebox">
                        <div id="codeGame-messagebox-section" class="codeGame-messagebox-section success">
                            <div class="codeGame-messagebox-header">
                                <pre id="codeGame-messagebox-title">Success</pre>
                                <div class="circle"></div>
                                <div style="right: 40px;" class="circle"></div>
                            </div>
                            <div class="codeGame-messagebox-cover">
                                <img src="assets/pinecones.svg" />
                            </div>
                            <div class="codeGame-messagebox-content">
                                <h1 id="codeGame-messagebox-text" class="maintitle">Wooo!<br>Great job</h1>
                            </div>
                            <div class="codeGame codeGame-messagebox-actions">
                                <button id="codeGame-nextLevel" class="nextLevel">Play next level</button>
                                <button id="codeGame-retryLevel" class="retryLevel"><p><img src="assets/restart.svg"/><span>Retry</span></p></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="codeGame-levelselector" class="codeGame-control-sidebar codeGame-levelselector" style="display: none;">
                    <div class="codeGame-levelselector-section">
                        <div class="codeGame-levelselector-header">
                            <pre id="codeGame-levelselector-title">Levels</pre>
                            <div class="circle"></div>
                            <div style="right: 28px;" class="circle"></div>
                        </div>
                        <div id="codeGame-levelselector-scrollcontainer" class="codeGame-levelselector-scrollcontainer">
                        </div>
                        <div class="codeGame-levelselector-footer">
                            <div class="codeGame">
                                <button id="codeGame-levelselector-close" class="levelselector close">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="codeGame-gamebox" class="codeGame-control-sidebar codeGame-control-container" style="display: block;">
                    <div class="codeGame-control-upper">
                        <h4 id="codeGame-levelTitle" class="level">LEVEL 1</h4>
                        <h1 id="codeGame-mainTitle" class="maintitle">Help the Lynx collect<br>pine cones!</h1>
                        <h3 id="codeGame-subTitle" class="subtitle">Please wait...</h3>
                    </div>
                    <div id="codeGame-control-lower" class="codeGame-control-lower">
                        <div class="codeGame-control-code-container">
                            <div style="position: relative" class="codeGame-control-code-header">
                                <pre>Code Panel</pre>
                                <div id="codeGame-button-clear" class="trash"></div>
                                <div class="trashnote">Clear code</div>
                                <div class="circle"></div>
                            </div>
                            <div id="codeGame-control-code-sequence" class="codeGame codeGame-control-code-sequence">
                            </div>
                            <div id="codeGame-control-actions" class="codeGame-control-code-actions">
                                <div class="codeGame codeGame-control-buttons">
                                    <div style="display: none;" id="codeGame-button-forward" class="button forward"></div>
                                    <div style="display: none;" id="codeGame-button-left" class="button left"></div>
                                    <div style="display: none;" id="codeGame-button-right" class="button right"></div>
                                    <div style="display: none;" id="codeGame-button-use" class="button use"></div>
                                    <div style="display: none;" id="codeGame-button-loop" class="button loop"></div>
                                </div>
                                <div class="codeGame codeGame-control-execute">
                                    <button id="codeGame-button-runsequence" class="execute"></button>
                                </div>
                            </div>
                        </div>
                        <div class="codeGame codeGame-control-levelselector">
                            <button id="codeGame-levelselector-open" class="levelselector open">Select level</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="bundle.js"></script>
        <!-- CODEGAME END -->


        <style>
            .bottomtext {
                text-align: center;
                position: relative;
                padding: 0 20px;
                font: normal normal normal 12px Source Sans Pro;
                margin-top: 240px;
            }

            .bottomtext a:link,
            .bottomtext a:visited {
                color: #000 !important;
            }
        </style>
        <p class="bottomtext">
            Copyright - Sanket Jagtap<br>
            All Rights Reserved.<br><br>
        </p>

    </body>

</html>