<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity Web Player | demo</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <style>
      #unity-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        overflow: hidden;
      }

      #unity-canvas {
        width: 100%;
        height: 100%;
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="unity-container" class="unity-desktop">
      <canvas id="unity-canvas" tabindex="-1"></canvas>
      <div id="unity-loading-bar">
        <div id="unity-logo"></div>
        <div id="unity-progress-bar-empty">
          <div id="unity-progress-bar-full"></div>
        </div>
      </div>
      <div id="unity-warning"></div>
      <div id="unity-footer">
        <div id="unity-logo-title-footer"></div>
        <div id="unity-fullscreen-button"></div>
        <div id="unity-build-title">demo</div>
      </div>
    </div>
    <script>
      var canvas = document.querySelector("#unity-canvas");

      function resizeCanvas() {
        var container = document.querySelector("#unity-container");
        canvas.width = container.clientWidth;
        canvas.height = container.clientHeight;
      }

      window.addEventListener("resize", resizeCanvas);
      resizeCanvas();

      var buildUrl = "Build";
      var loaderUrl = buildUrl + "/demo3.loader.js";
      var config = {
        arguments: [],
        dataUrl: buildUrl + "/demo3.data.gz",
        frameworkUrl: buildUrl + "/demo3.framework.js.gz",
        codeUrl: buildUrl + "/demo3.wasm.gz",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "DefaultCompany",
        productName: "demo",
        productVersion: "1.0",
        showBanner: function (msg, type) {
          var warningBanner = document.querySelector("#unity-warning");
          function updateBannerVisibility() {
            warningBanner.style.display = warningBanner.children.length ? "block" : "none";
          }
          var div = document.createElement("div");
          div.innerHTML = msg;
          warningBanner.appendChild(div);
          if (type === "error") div.style = "background: red; padding: 10px;";
          else {
            if (type === "warning") div.style = "background: yellow; padding: 10px;";
            setTimeout(function () {
              warningBanner.removeChild(div);
              updateBannerVisibility();
            }, 5000);
          }
          updateBannerVisibility();
        },
      };

      var script = document.createElement("script");
      script.src = loaderUrl;
      script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          document.querySelector("#unity-progress-bar-full").style.width = 100 * progress + "%";
        }).then((unityInstance) => {
          document.querySelector("#unity-loading-bar").style.display = "none";
          document.querySelector("#unity-fullscreen-button").onclick = () => {
            unityInstance.SetFullscreen(1);
          };
          resizeCanvas();
        }).catch((message) => {
          alert(message);
        });
      };

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