<html>
<head>
    <link rel="icon" href="./favicon.ico"/>
    <meta charset="utf-8"/>
    <title><%= title %></title>
    <meta
            name="viewport"
            content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,minimal-ui=true"
    />
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="full-screen" content="yes"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <link rel="stylesheet" type="text/css" href="./index.css"/>
</head>
<body style="overflow: hidden;">
<div class="toolbar disabled">
    <div class="item">
        <div id="view-select" class="view-select-container" value="iPhone XS Max" tabindex="-1">
            <div class="view-select">
                <div class="label">
                    <span id="name"></span>
                </div>
                <i class="arrow-triangle"></i>
            </div>
            <div class="options">
                <ul>
                    <li class="" data-device="Default">
                        设计分辨率 (1280X720)
                    </li>

                    <li class="" data-device="FullScreen">
                        全屏
                    </li>

                    <li class="separator"></li>

                    <li class="selected" data-device="iPhone XS Max">
                        iPhone XS Max (414X896)
                    </li>

                    <li class="" data-device="iPhone XS">
                        iPhone XS (375X812)
                    </li>

                    <li class="" data-device="Pixel 3 XL">
                        Pixel 3 XL (393X786)
                    </li>

                </ul>
            </div>
        </div>
    </div>
    <div class="item">
        <button id="btn-rotate" class="checked">Rotate</button>
    </div>
    <span style="font-size: small;" class="item">Debug Mode:</span>
    <div class="item">
        <select id="opts-debug-mode" value="INFO">
            <option value="NONE">None</option>
            <option value="VERBOSE">Verbose</option>
            <option value="INFO">Info</option>
            <option value="WARN">Warn</option>
            <option value="ERROR">Error</option>
            <option value="INFO_FOR_WEB_PAGE">Info For Web Page</option>
            <option value="WARN_FOR_WEB_PAGE">Warn For Web Page</option>
            <option value="ERROR_FOR_WEB_PAGE">Error For Web Page</option>
        </select>
    </div>
    <div class="item">
        <button id="btn-show-fps" class="checked">Show FPS</button>
    </div>
    <div class="item">
        <span style="font-size: small;" class="item">FPS:</span><input id="input-set-fps" type="number" value="60"/>
    </div>
    <div style="margin-right: 0;" class="item">
        <button id="btn-pause">Pause</button>
        <button id="btn-step">Step</button>
    </div>
    <div class="item">
        <button id="btn-step" style="display: none;">Step</button>
    </div>
    <div id="step-length">
        <span>Step Length: </span>
        <input type="text" value="1">
        <span>ms</span>
    </div>
</div>
<div id="content" class="content" style="overflow: hidden;">
    <div class="contentWrap">
        <div id="GameDiv" class="wrapper">
            <div id="Cocos3dGameContainer">
                <canvas id="GameCanvas" tabindex="-1" style="background-color: '';"></canvas>
            </div>
            <div id="splash">
                <div class="progress-bar stripes"><span></span></div>
            </div>
            <div id="bulletin">
                <div id="sceneIsEmpty" class="inner"><%= tip_sceneIsEmpty %></div>
            </div>
            <div class="error" id="error">
                <div class="title">Error <i>(Please open the console to see detailed errors)</i></div>
                <div class="error-main"></div>
                <div class="error-stack"></div>
            </div>
        </div>
    </div>
</div>
<!-- Polyfills bundle. -->
<script src="/scripting/polyfills/bundle.js"></script>

<!-- Import map that map the engine feature unit modules. -->
<script src="/scripting/engine/bin/.cache/dev/preview/import-map.json" type="systemjs-importmap"></script>

<!-- Import map that map the entry of project module(s). -->
<script src="/scripting/x/import-map.json" type="systemjs-importmap"></script>

<!-- Import map that map 'cc', 'cc/env'. -->
<script src="/scripting/import-map-global" type="systemjs-importmap"></script>

<!-- SystemJS support. -->
<script src="/scripting/systemjs/system.js"></script>

<!-- Setup the detailed resolution. -->
<script>
	System.setResolutionDetailMapCallback(function () {
		var url = new URL('/scripting/x/resolution-detail-map.json', window.location);
		return fetch(url).then(function (response) {
			return response.json();
		}).then(function (json) {
			return { json, url: url.href };
		});
	});
</script>

<script src="/scripting/engine/bin/.cache/dev/preview/bundled/index.js"></script>

<!-- Manifest file. -->
<script name="setting" src="/settings.js?scene=current_scene"></script>

<script>
	window.onload = function () {
		System.import("/preview-app/index.js").then(function (mod) {
			return mod.bootstrap({
				engineBaseUrl: '/scripting/engine',
				settings: window._CCSettings,
				devices: {
					"Default": { "name": "设计分辨率", "width": 1280, "height": 720, "ratio": 1 },
					"FullScreen": { "name": "全屏" },
					"__separator__": { "name": "__separator__" },
					"iPhone XS Max": { "name": "iPhone XS Max", "width": 414, "height": 896, "ratio": 3 },
					"iPhone XS": { "name": "iPhone XS", "width": 375, "height": 812, "ratio": 3 },
					"Pixel 3 XL": { "name": "Pixel 3 XL", "width": 393, "height": 786, "ratio": 3.67 },
				},
			});
		}).catch(function (err) {
			console.error(err);
		});
	};
</script>
</body>
</html>
