<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>{{{ PRODUCT_NAME }}}</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #1a1a1a;
        font-family: Arial, sans-serif;
      }

      #unity-container {
        width: 100%;
        height: 100%;
      }

      #unity-canvas {
        width: 100%;
        height: 100%;
        background: #231F20;
      }

      #loading-screen {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #1a1a1a;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: opacity 0.5s;
      }

      .progress-bar {
        width: 80%;
        max-width: 400px;
        height: 10px;
        background: #333;
        border-radius: 5px;
        margin: 20px 0;
        overflow: hidden;
      }

      .progress-fill {
        width: 0%;
        height: 100%;
        background: #00ff00;
        transition: width 0.2s;
      }

      .loading-text {
        color: #fff;
        font-size: 18px;
        margin-top: 10px;
      }

      .game-title {
        color: #fff;
        font-size: 24px;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 2px;
      }

      .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #333;
        border-top: 4px solid #00ff00;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 20px;
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }

      .hidden {
        opacity: 0;
        pointer-events: none;
      }

      /* Mobile-specific styles */
      @media (max-width: 768px) {
        .game-title {
          font-size: 20px;
        }
        
        .loading-text {
          font-size: 16px;
        }
        
        .progress-bar {
          width: 90%;
        }
      }
    </style>
  </head>
  <body>
    <div id="unity-container">
      <canvas id="unity-canvas"></canvas>
      <div id="loading-screen">
        <div class="game-title">{{{ PRODUCT_NAME }}}</div>
        <div class="spinner"></div>
        <div class="progress-bar">
          <div class="progress-fill"></div>
        </div>
        <div class="loading-text">Loading...</div>
      </div>
    </div>
    <script>
      const buildUrl = "Build";
      const loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";
      const config = {
        dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
        frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
        codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
#if MEMORY_FILENAME
        memoryUrl: buildUrl + "/{{{ MEMORY_FILENAME }}}",
#endif
#if SYMBOLS_FILENAME
        symbolsUrl: buildUrl + "/{{{ SYMBOLS_FILENAME }}}",
#endif
        streamingAssetsUrl: "StreamingAssets",
        companyName: "{{{ COMPANY_NAME }}}",
        productName: "{{{ PRODUCT_NAME }}}",
        productVersion: "{{{ PRODUCT_VERSION }}}",
      };

      const container = document.querySelector("#unity-container");
      const canvas = document.querySelector("#unity-canvas");
      const loadingScreen = document.querySelector("#loading-screen");
      const progressBarFill = document.querySelector(".progress-fill");
      const loadingText = document.querySelector(".loading-text");

      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        container.className = "unity-mobile";
      }

      let script = document.createElement("script");
      script.src = loaderUrl;
      script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          progressBarFill.style.width = `${progress * 100}%`;
          loadingText.textContent = `Loading... ${Math.round(progress * 100)}%`;
        }).then((unityInstance) => {
          loadingScreen.classList.add("hidden");
        }).catch((message) => {
          alert(message);
        });
      };
      document.body.appendChild(script);
    </script>
  </body>
</html>
