yawn/server/web/gltf.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#06111d" />
    <meta
      name="description"
      content="Open a local glTF or GLB file in the Yawn WebGPU viewer."
    />
    <title>glTF Viewer — Yawn</title>
    <link rel="stylesheet" href="/assets/gltf.css" />
    <script type="importmap">
      {
        "imports": {
          "@yawn/core": "/pkg/core.js",
          "@yawn/handles": "/pkg/handles.js"
        }
      }
    </script>
    <script type="module" src="/assets/gltf.js"></script>
  </head>
  <body>
    <main id="drop-zone" class="viewer" aria-label="Yawn glTF viewer">
      <canvas id="canvas" aria-label="3D model preview"></canvas>

      <output id="render-time" class="render-time" hidden>
        <span>Render</span>
        <strong id="render-value">— ms</strong>
      </output>

      <button id="drop-prompt" class="drop-prompt" type="button">
        <span class="drop-icon" aria-hidden="true">↓</span>
        <strong id="prompt-message">Drop a glTF file</strong>
        <small id="prompt-detail"
          >GLB or self-contained glTF · processed locally</small
        >
      </button>
      <input
        id="file-picker"
        type="file"
        accept=".glb,.gltf,model/gltf-binary,model/gltf+json"
        hidden
      />
    </main>
  </body>
</html>