Webleb - UI Elements

HTML

<!DOCTYPE html>
<html lang="en-us">

<head>
  <base href="https://cdn.jsdelivr.net/gh/genizy/survivor@main/">
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>survivor.io</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

#unity-canvas {
      width: 100%;
      height: 100%;
      background: #000000;
      display: block;
    }
    #loading-text {
  font-weight: bold;
  background: linear-gradient(
    270deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082,
    #8f00ff
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 3s ease infinite;
}

@keyframes rainbow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

</style>
</head>

<body>
  <div id="loading-text"
    style="color: white; font-size: 48px; font-family: cursive; text-align: center; margin-top: 20px;"> LOADING...
  </div>
  <canvas id="unity-canvas"></canvas>
  <script src="Build/7a2dbded24d57e056180125b1583e7c4.loader.js"></script>
  <script>var loadingText = document.querySelector("#loading-text");
    let totalBytes = 0;
    let loadedBytes = 0;

async function fetchWithProgress(url) {
      const response = await fetch(url);
      const reader = response.body.getReader();
      let chunks = [];
      let received = 0;
      while (true) {
        const {
          done,
          value
        } = await reader.read();
        if (done) break;
        received += value.length;
        loadedBytes += value.length;
        chunks.push(value);
        let mbDone = (loadedBytes / (1024 * 1024)).toFixed(2);
        let mbTotal = '87.7';
        loadingText.textContent = `LOADING... ${mbDone} MB / ${mbTotal} MB`;
      }
      let fullBuffer = new Uint8Array(received);
      let offset = 0;
      for (let chunk of chunks) {
        fullBuffer.set(chunk, offset);
        offset += chunk.length;
      }
      return fullBuffer.buffer;
    }
    async function mergeFiles(fileParts, cacheKey) {
      const buffers = await Promise.all(
        fileParts.map(part => fetchWithProgress(part))
      );
      const mergedBlob = new Blob(buffers);
      return URL.createObjectURL(mergedBlob);
    }

var hugeCanvas = document.querySelector("#unity-canvas");

createUnityInstance(hugeCanvas, {
        dataUrl: dataUrl,
        frameworkUrl: "Build/c38019a83ea4c8d041a01438387f1e7e.framework.js",
        codeUrl: wasmUrl,
        streamingAssetsUrl: "StreamingAssets",
        companyName: "madkidgames.com",
        productName: "Survivor.io",
        productVersion: "1.0",
      });
      loadingText.remove();
    })();
  </script>
  <script>
(function () {
  function resizeUnityCanvas() {
    const canvas = document.getElementById('unity-canvas');
    if (!canvas) return;

const targetAspect = 9 / 16;

const reducedHeight = window.innerHeight;
    const calculatedWidth = reducedHeight * targetAspect;

canvas.style.height = reducedHeight + 'px';
    canvas.style.width = calculatedWidth + 'px';

canvas.style.display = 'block';
    canvas.style.margin = 'auto';
  }

window.addEventListener('load', resizeUnityCanvas);
  window.addEventListener('resize', resizeUnityCanvas);
  window.addEventListener('orientationchange', resizeUnityCanvas);
})();
</script>
</body>

</html>

CSS

JS

survio.io