mujoco

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@200..800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="live.css">
    <link rel="icon" href="favicon.ico" sizes="16x16 32x32 48x48">
    <title>MuJoCo Live</title>
  </head>
  <body style="margin: 0; overflow: hidden">
    <div id="loadingOverlay">
      <div class="loading-container">
        <div class="loading-visual">
          <!-- Rotating neon light-blue physics wireframe cage. -->
          <svg class="wireframe-cage" viewBox="0 0 200 200">
            <g class="cage-lines">
              <polygon points="130,10 190,130 96,190 10,96" fill="none" stroke="#00f5d4" stroke-width="0.8" opacity="0.75" />
              <line x1="10" y1="96" x2="45" y2="106" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
              <line x1="45" y1="106" x2="130" y2="10" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
              <line x1="45" y1="106" x2="96" y2="190" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
              <line x1="45" y1="106" x2="190" y2="130" stroke="#00f5d4" stroke-width="0.5" opacity="0.45" />
              <line x1="150" y1="100" x2="130" y2="10" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
              <line x1="150" y1="100" x2="96" y2="190" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
              <line x1="150" y1="100" x2="190" y2="130" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
              <line x1="150" y1="100" x2="45" y2="106" stroke="#00f5d4" stroke-width="0.4" opacity="0.35" />
            </g>
          </svg>

          <!-- Centered MuJoCo SVG Logo -->
          <div class="logo-container-svg">
            <svg viewBox="90 30 415 90" class="brand-logo-svg" title="MuJoCo">
              <g fill="rgba(255, 255, 255, 0.98)" filter="drop-shadow(0 0 6px rgba(123, 147, 232, 0.25)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.25))">
                <path d="M136.1,118.4l-19.7-47.3l-7.1,41.6H96.5l15.4-80.9l0,0L136.4,90l25.5-58.1l0,0l13.9,80.9H163l-6.3-41.6 L136.1,118.4L136.1,118.4L136.1,118.4z M211.9,113.2c-4.5,0-8.6-0.9-12.1-2.6c-3.5-1.7-6.3-4.3-8.3-7.6c-2-3.4-3-7.5-3-12.3V55.2h13.6v34.1 c0,2.8,0.4,5,1.1,6.7c0.7,1.7,1.8,3,3.3,3.9s3.2,1.3,5.3,1.3s3.9-0.4,5.3-1.3s2.5-2.2,3.3-3.9c0.7-1.7,1.1-4,1.1-6.8V55.2h13.6 v35.5c0,4.8-1,9-3,12.3c-2,3.4-4.7,5.9-8.3,7.6C220.4,112.4,216.4,113.2,211.9,113.2L211.9,113.2z M260.1,113.6c-3,0-5.9-0.5-8.7-1.4c-2.8-0.9-5.3-2.4-7.6-4.2l6.1-10.8c1.6,1.3,3.1,2.3,4.5,2.9s2.9,1,4.2,1 c1.9,0,3.5-0.4,4.6-1.2s1.9-2,2.4-3.7c0.5-1.7,0.8-4,0.8-6.9V36.1h13.3V90c0,5.3-0.7,9.7-2.2,13.2c-1.5,3.5-3.6,6.1-6.5,7.8 C268.2,112.8,264.5,113.6,260.1,113.6L260.1,113.6z M325.8,113.2c-5.4,0-10.5-1.3-15.1-3.7c-4.6-2.5-8.4-6-11.1-10.5c-2.8-4.5-4.2-9.6-4.2-15.3s1.4-10.4,4.2-15 c2.8-4.5,6.5-8.1,11.2-10.6c4.7-2.6,9.8-3.9,15.3-3.9c5.5,0,10.6,1.3,15.2,3.9c4.6,2.6,8.4,6.1,11.1,10.6 c2.8,4.5,4.2,9.6,4.2,15.1s-1.4,10.6-4.2,15.1c-2.8,4.5-6.5,8-11.2,10.5C336.5,111.9,331.3,113.2,325.8,113.2L325.8,113.2z M325.8,100.9c3.2,0,6.1-0.7,8.6-2.2c2.6-1.5,4.6-3.5,6.1-6.1c1.5-2.6,2.2-5.5,2.2-8.7c0-3.2-0.7-6.1-2.2-8.7 c-1.5-2.7-3.5-4.7-6-6.2s-5.4-2.3-8.6-2.3s-5.9,0.8-8.5,2.3c-2.6,1.5-4.6,3.6-6.1,6.2c-1.5,2.6-2.2,5.5-2.2,8.7s0.8,6.2,2.3,8.9 c1.5,2.6,3.5,4.7,6.1,6.1C320.1,100.1,322.8,100.9,325.8,100.9L325.8,100.9z M408.1,113.6c-7.3,0-13.9-1.7-19.9-5.2c-6-3.5-10.7-8.2-14.2-14.2c-3.5-6-5.2-12.5-5.2-19.7 s1.7-13.8,5.2-19.9c3.5-6.1,8.3-10.9,14.4-14.5c6.1-3.6,13-5.4,20.5-5.4c3.4,0,6.7,0.5,9.9,1.4c3.3,0.9,6.5,2.2,9.6,4l0.1,15.4 c-3.2-2.8-6.5-4.8-9.8-6.2c-3.3-1.4-6.7-2.1-10.2-2.1c-4.8,0-9.2,1.2-13.2,3.6c-4,2.4-7.2,5.7-9.6,9.9c-2.4,4.2-3.5,8.8-3.5,13.8 s1.2,9.4,3.5,13.5c2.4,4.1,5.5,7.3,9.6,9.7c4,2.4,8.5,3.6,13.4,3.6c2.6,0,5-0.3,7.1-0.8c2.1-0.5,4.1-1.4,6.2-2.7 c2-1.2,4.2-2.9,6.7-5l-0.1,15.5c-3.1,1.7-6.4,3.1-9.9,4C415.1,113.2,411.6,113.6,408.1,113.6L408.1,113.6z M473.7,113.2c-5.4,0-10.5-1.3-15.1-3.7c-4.6-2.5-8.4-6-11.1-10.5c-2.8-4.5-4.2-9.6-4.2-15.3s1.4-10.4,4.2-15 c2.8-4.5,6.5-8.1,11.2-10.6s9.8-3.9,15.3-3.9c5.5,0,10.6,1.3,15.2,3.9c4.6,2.6,8.4,6.1,11.1,10.6c2.8,4.5,4.2,9.6,4.2,15.1 s-1.4,10.6-4.2,15.1c-2.8,4.5-6.5,8-11.2,10.5C484.4,111.9,479.3,113.2,473.7,113.2L473.7,113.2z M473.7,100.9 c3.2,0,6.1-0.7,8.6-2.2c2.6-1.5,4.6-3.5,6.1-6.1c1.5-2.6,2.2-5.5,2.2-8.7c0-3.2-0.7-6.1-2.2-8.7c-1.5-2.7-3.5-4.7-6-6.2 s-5.4-2.3-8.6-2.3c-3.2,0-5.9,0.8-8.5,2.3c-2.6,1.5-4.6,3.6-6.1,6.2c-1.5,2.6-2.2,5.5-2.2,8.7s0.8,6.2,2.3,8.9s3.5,4.7,6.1,6.1 C468,100.1,470.7,100.9,473.7,100.9L473.7,100.9z"/>
              </g>
            </svg>
          </div>
        </div>

        <div class="loading-title">Loading model</div>

        <!-- Asset Download Indicator -->
        <div id="loadingDownload" class="loading-download">
          <div class="loading-download-label">Downloading asset file</div>
          <div id="loadingDownloadFile" class="loading-download-file"></div>
        </div>
      </div>
    </div>
    <div id="dropOverlay">
      <div class="drop-message">Drop model file here</div>
    </div>
    <div id="commitHash">__COMMIT_HASH_PLACEHOLDER__</div>
    <canvas id="canvas" class="emscripten" oncontextmenu="event.preventDefault()"></canvas>
    <script src="live.js"></script>
  </body>
</html>