<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>{{{ PRODUCT_NAME }}}</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        line-height: 1;
      }

      * {
        box-sizing: border-box;
      }

      #unity-canvas {
        width: 100vw;
        height: 100vh;
        position: absolute;
        left: 0;
        top: 0;
      }

      #loading-ui {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background: #000000;
        color: #e9e9e9;
        font-family: PingFangSC, Open Sans, Helvetica Neue, Arial,
          Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
        font-size: 14px;
        user-select: none;
      }

      .loading-bar {
        width: 200px;
        height: 14px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 20px;
      }

      #loading-bar-fill {
        width: 0;
        height: 100%;
        background: #fae457;
        border-radius: 10px;
      }

      .loading-text {
        display: flex;
        align-items: center;
        text-align: center;
        font-size: 14px;
        cursor: default;
      }

      .loading-icon {
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background: none;
        border: 2px solid #e9e9e9;
        border-top-color: transparent;
        border-right-color: transparent;
        margin-right: 10px;
        animation: loading-icon-rotate 1s linear infinite;
      }

      @keyframes loading-icon-rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      .fading {
        animation: fading 0.5s ease-out forwards;
      }

      @keyframes fading {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }
    </style>
  </head>
  <body style="text-align: center; padding: 0; border: 0; margin: 0">
    <canvas
      id="unity-canvas"
      tabindex="-1"
      style="background: {{{ BACKGROUND_FILENAME ? 'url(\'Build/' + BACKGROUND_FILENAME.replace(/'/g, '%27') + '\') center / cover' : BACKGROUND_COLOR }}}"
    ></canvas>
    <div id="loading-ui">
      <div id="loading-bar" class="loading-bar">
        <div id="loading-bar-fill"></div>
      </div>
      <div id="loading-text" class="loading-text">
        <div class="loading-icon"></div>
        游戏加载中，请稍后
      </div>
    </div>
    <span style="display: none; visibility: hidden; user-select: none; opacity: 0;">COMPRESSION INFO: '{{{ DECOMPRESSION_FALLBACK }}}'</span>
    <script>
      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        // Mobile device style: fill the whole browser client area with the game canvas:
        var meta = document.createElement("meta");
        meta.name = "viewport";
        meta.content =
          "width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes";
        document.getElementsByTagName("head")[0].appendChild(meta);

        var canvas = document.querySelector("#unity-canvas");
        canvas.style.width = "100%";
        canvas.style.height = "100%";
        canvas.style.position = "fixed";

        document.body.style.textAlign = "left";
      }

      const loaderUrl = "Build/{{{ LOADER_FILENAME }}}";
      const script = document.createElement("script");
      script.src = loaderUrl;
      const loadingBarFill = document.querySelector("#loading-bar-fill");

      script.onload = () => {
        createUnityInstance(
          document.querySelector("#unity-canvas"),
          {
            dataUrl: "Build/{{{ DATA_FILENAME }}}",
        frameworkUrl: "Build/{{{ FRAMEWORK_FILENAME }}}",
#if USE_THREADS
        workerUrl: "Build/{{{ WORKER_FILENAME }}}",
#endif
#if USE_WASM
        codeUrl: "Build/{{{ CODE_FILENAME }}}",
#endif
#if MEMORY_FILENAME
        memoryUrl: "Build/{{{ MEMORY_FILENAME }}}",
#endif
#if SYMBOLS_FILENAME
        symbolsUrl: "Build/{{{ SYMBOLS_FILENAME }}}",
#endif
        streamingAssetsUrl: "StreamingAssets",
        companyName: {{{ JSON.stringify(COMPANY_NAME) }}},
        productName: {{{ JSON.stringify(PRODUCT_NAME) }}},
        productVersion: {{{ JSON.stringify(PRODUCT_VERSION) }}},
        // matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
        // devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
          },
          (progress) => {
            loadingBarFill.style.width = 100 * progress + "%";
          }
        )
          .then((unityInstance) => {
            const loadingBar = document.querySelector("#loading-bar");
            const loadingText = document.querySelector("#loading-text");
            loadingText.innerHTML = "游戏加载完成";
            loadingBar.classList.add("fading");
            loadingText.classList.add("fading");
            setTimeout(() => {
              const loadingUI = document.querySelector("#loading-ui");
              loadingUI.classList.add("fading");
              
              setTimeout(() => {
                loadingUI.style.display = "none";
              }, 500);
            }, 650);
          })
          .catch((message) => {
            alert(message);
          });
      };

      document.body.appendChild(script);
    </script>
  </body>
</html>
