<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>Cave Cruiser</title>

    <!--http://www.html5rocks.com/en/mobile/mobifying/-->
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,minimal-ui=true" />

    <!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">

    <!-- force webkit on 360 -->
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <!-- force edge on IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="msapplication-tap-highlight" content="no">

    <!-- force full screen on some browser -->
    <meta name="full-screen" content="yes" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="360-fullscreen" content="true" />

    <!--fix fireball/issues/3568 -->
    <!--<meta name="browsermode" content="application">-->
    <meta name="x5-page-mode" content="app">

    <!--<link rel="apple-touch-icon" href=".png" />-->
    <!--<link rel="apple-touch-icon-precomposed" href=".png" />-->

    <style>
        html {
            -ms-touch-action: none;
        }

        body, canvas, div {
            display: block;
            outline: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

            user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        /* Remove spin of input type number */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            /* display: none; <- Crashes Chrome on hover */
            -webkit-appearance: none;
            margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
        }

        body {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 0;
            border: 0;
            margin: 0;

            cursor: default;
            color: #888;
            background-color: white;

            text-align: center;
            font-family: Helvetica, Verdana, Arial, sans-serif;

            display: flex;
            flex-direction: column;
        }

        canvas {
            background-color: rgba(0, 0, 0, 0);
        }

        #GameDiv, #Cocos3dGameContainer, #GameCanvas {
            width: 100%;
            height: 100%;
        }

        :root {
            --safe-top: env(safe-area-inset-top);
            --safe-right: env(safe-area-inset-right);
            --safe-bottom: env(safe-area-inset-bottom);
            --safe-left: env(safe-area-inset-left);
        }

    </style>

    <script src="{{__remoteUrl__}}src/assets/plugin/zepto.min.js"></script>
    <script src="{{__remoteUrl__}}src/assets/plugin/declare-process.js"></script>
    <script src="{{__remoteUrl__}}src/assets/plugin/SVGA.Lite.v2.1.1.js"></script>
    <script src="{{__remoteUrl__}}src/assets/plugin/jszip.min.v3.10.1.js"></script>
<!--    <link rel="stylesheet" type="text/css" href="{{__remoteUrl__}}style.css" />-->
<!--    <link rel="stylesheet" type="text/css" href="{{__remoteUrl__}}custom.css" />-->

<!--    <script src="//yun-duiba-credits-test.duibatest.com.cn/TNGD_GAMES/libs/eruda.min.js"></script>-->
<!--    <script>eruda.init()</script>-->
</head>
<body style="overflow: hidden; visibility: hidden">
<div id="GameDiv" cc_exact_fit_screen="true" style="overflow: hidden;">
    <div id="Cocos3dGameContainer">
        <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="99"></canvas>
    </div>
</div>

<!-- Polyfills bundle. -->
<script src="{{__remoteUrl__}}src/polyfills.bundle.js" charset="utf-8"></script>

<!-- SystemJS support. -->
<script src="{{__remoteUrl__}}src/system.bundle.js" charset="utf-8"></script>

<!-- Import map -->
<!--<script src="https:{{__remoteUrl__}}src/import-map.json" type="systemjs-importmap" charset="utf-8"></script>-->
<script type="systemjs-importmap" charset="utf-8">
    {"imports":{"cc":"{{__remoteUrl__}}cocos-js/cc.js"}}
</script>


<script>
    System.import('{{__remoteUrl__}}index.js').catch(function (err) {
        console.error(err);
    })
</script>

</body>
</html>
