suby
/
genrecon


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
							<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no" />
  <meta name="theme-color" content="#0e1116" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <title>GenRecon — wideo → spacer 3D</title>
  <link rel="manifest" href="./manifest.webmanifest" />
  <link rel="icon" href="./icons/icon-192.png" />
  <link rel="apple-touch-icon" href="./icons/icon-192.png" />
  <link rel="stylesheet" href="./styles.css" />
  <script type="importmap">
  { "imports": { "three": "./vendor/three.module.js" } }
  </script>
</head>
<body>
  <header id="topbar"><span class="logo">◳</span> GenRecon <small>wideo → spacer 3D</small></header>

  <main id="app">
    <!-- 1. upload -->
    <section id="view-upload" class="view active">
      <div class="card">
        <h1>Nakręć wnętrze telefonem → wejdź do środka</h1>
        <p class="muted">Wgraj film z pokoju (powoli obejdź dookoła). Zrekonstruujemy scenę 3D, po której będziesz mógł chodzić w przeglądarce.</p>
        <label id="drop" for="file-input">
          <input id="file-input" type="file" accept="video/*" capture="camcorder" hidden />
          <div class="drop-inner">
            <div class="big">⬆</div>
            <div>Dotknij / upuść film</div>
            <div class="muted small">MP4 / MOV — najlepiej 10–40 s, wolny obrót</div>
          </div>
        </label>
        <button id="btn-demo" class="ghost">▶ Zobacz przykładową scenę 3D</button>
      </div>
    </section>

    <!-- 2. progress -->
    <section id="view-progress" class="view">
      <div class="card">
        <h2>Rekonstrukcja…</h2>
        <ul id="stages"></ul>
        <div class="bar"><div id="bar-fill"></div></div>
        <div id="progress-msg" class="muted small">…</div>
        <details><summary class="muted small">Log</summary><pre id="log"></pre></details>
        <button id="btn-cancel" class="ghost">← Nowy skan</button>
      </div>
    </section>

    <!-- 3. walkthrough -->
    <section id="view-viewer" class="view">
      <div id="viewer-canvas"></div>
      <div id="hud-help">Kliknij, by wejść — <b>WASD</b> + mysz, <b>spacja</b> skok. (telefon: dżojstik + przeciągnij)</div>
      <div id="joystick"><div id="joystick-knob"></div></div>
      <button id="btn-recenter" title="Wróć na start">⟲</button>
      <button id="btn-new" class="ghost">Nowy skan</button>
    </section>
  </main>

  <script type="module" src="./app.js"></script>
</body>
</html>