akilli-bina-3d/kaynak/index.html

<!doctype html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>NUMEX ARCHITECT 3D — Akıllı Bina Dijital İkizi</title>
    <meta name="description" content="Numex Architect 3D — 6 katlı rezidans dijital ikiz prototipi: gezilebilir daire, çalışan asansör, kat ayrıştırma, X-Ray teknik sistemler." />
    <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=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
  </head>
  <body>
    <div id="app">
      <!-- ÜST BAR -->
      <header class="topbar">
        <div class="brand">
          <svg class="brand-mark" viewBox="0 0 40 40" aria-hidden="true">
            <path d="M6 33V13l14-8 14 8v20" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linejoin="round"/>
            <path d="M13 33V19h6v14M23 21h6v6h-6z" fill="none" stroke="currentColor" stroke-width="1.6"/>
          </svg>
          <div class="brand-text">
            <h1>NUMEX <span>ARCHITECT</span> 3D</h1>
            <p>Akıllı Bina Dijital İkizi · Rezidans / 18 Daire</p>
          </div>
        </div>
        <div class="topbar-actions">
          <div class="stat-chip" id="fps-chip" title="Gerçek ölçüm (kare süresinden)">
            <span class="dot" id="fps-dot"></span>
            <span id="fps-value">--</span> FPS
          </div>
          <div class="stat-chip mono" id="drawcall-chip" title="Çizim çağrısı / üçgen">
            <span id="drawcall-value">--</span>
          </div>
          <button class="icon-btn" id="btn-reset-top" title="Sahneyi sıfırla">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
            Sıfırla
          </button>
        </div>
      </header>

      <!-- SOL PANEL -->
      <aside class="panel panel-left" id="panel-left">
        <div class="panel-head">
          <h2>Proje</h2>
          <button class="collapse-btn" data-target="panel-left" title="Paneli daralt">‹</button>
        </div>

        <section class="sec">
          <h3>Katlar <span class="muted" id="floor-count">7</span></h3>
          <ul class="floor-list" id="floor-list"></ul>
          <div class="row-btns">
            <button class="mini-btn" id="btn-isolate-clear" disabled>İzolasyonu kaldır</button>
          </div>
        </section>

        <section class="sec">
          <h3>Daireler <span class="muted" id="apt-count">18</span></h3>
          <div class="filter-row" id="apt-filter">
            <button class="chip active" data-f="all">Tümü</button>
            <button class="chip" data-f="K1">1</button>
            <button class="chip" data-f="K2">2</button>
            <button class="chip" data-f="K3">3</button>
            <button class="chip" data-f="K4">4</button>
            <button class="chip" data-f="K5">5</button>
          </div>
          <div class="apt-list" id="apt-list"></div>
        </section>

        <section class="sec">
          <h3>Görünür Katmanlar</h3>
          <div class="layer-list" id="layer-list"></div>
        </section>

        <section class="sec">
          <h3>Kamera Modu</h3>
          <div class="mode-group" id="mode-group">
            <button class="mode-btn active" data-mode="exterior">
              <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18"/></svg>
              Dış Mekân
            </button>
            <button class="mode-btn" data-mode="interior">
              <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 21V8l8-5 8 5v13"/><path d="M9 21v-8h6v8"/></svg>
              İç Mekân
            </button>
            <button class="mode-btn" data-mode="cinematic">
              <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="5" width="14" height="14" rx="2"/><path d="M16 9l6-3v12l-6-3z"/></svg>
              Sinematik
            </button>
          </div>
          <p class="hint" id="mode-hint">Fare ile döndür · tekerlek ile yaklaş</p>
        </section>
      </aside>

      <!-- 3D SAHNE -->
      <main class="viewport" id="viewport">
        <canvas id="scene"></canvas>
        <div class="vignette" aria-hidden="true"></div>

        <div class="viewport-overlay">
          <div class="compass" id="compass" title="Kuzey">
            <svg viewBox="0 0 100 100" aria-hidden="true">
              <circle cx="50" cy="50" r="44" fill="none" stroke="currentColor" stroke-width="1" opacity="0.35"/>
              <path d="M50 12 L56 50 L50 44 L44 50 Z" fill="currentColor"/>
              <text x="50" y="86" text-anchor="middle" font-size="12" fill="currentColor" opacity="0.8">K</text>
            </svg>
          </div>
          <div class="build-caption">
            <div class="bc-no">PRJ-2026 / 018</div>
            <div class="bc-name">NUMEX RESIDENCE</div>
            <div class="bc-meta">30 × 22 m · 6 kat + bodrum · 18 daire</div>
          </div>
        </div>

        <div class="toast" id="toast" role="status" aria-live="polite"></div>

        <div class="cine-bar" id="cine-bar" hidden>
          <div class="cine-track"><div class="cine-fill" id="cine-fill"></div></div>
          <button class="mini-btn" id="btn-cine-stop">Turu bitir</button>
        </div>

        <div class="interior-help" id="interior-help" hidden>
          <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> yürü · <kbd>Fare</kbd> bak · <kbd>Shift</kbd> koş · <kbd>Q</kbd>/<kbd>E</kbd> dön
        </div>
      </main>

      <!-- SAĞ PANEL -->
      <aside class="panel panel-right" id="panel-right">
        <div class="panel-head">
          <h2 id="inspect-title">Seçim</h2>
          <button class="collapse-btn" data-target="panel-right" title="Paneli daralt">›</button>
        </div>
        <div class="inspect-empty" id="inspect-empty">
          <svg viewBox="0 0 48 48" width="38" height="38" fill="none" stroke="currentColor" stroke-width="1.4">
            <path d="M24 6l16 9v18l-16 9-16-9V15z"/><path d="M24 6v20M8 15l16 11 16-11"/>
          </svg>
          <p>Bir nesneye tıklayın</p>
          <span>Kapı · ışık · pencere · daire · oda · kat</span>
        </div>
        <div class="inspect-body" id="inspect-body" hidden></div>
      </aside>

      <!-- ALT BAR -->
      <footer class="bottombar">
        <div class="bb-group bb-explode">
          <div class="bb-label">
            <span>Bina Ayrıştırma</span>
            <strong id="explode-value">%0</strong>
          </div>
          <input type="range" id="explode" min="0" max="100" value="0" step="1" class="slider" aria-label="Bina ayrıştırma yüzdesi" />
        </div>

        <div class="bb-group bb-time">
          <div class="bb-label">
            <span>Gün / Gece</span>
            <strong id="time-value">17:30</strong>
          </div>
          <input type="range" id="time" min="0" max="24" value="17.5" step="0.1" class="slider" aria-label="Saat" />
        </div>

        <div class="bb-group bb-weather" id="weather-group">
          <button class="weather-btn active" data-w="sunny" title="Güneşli">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4"/></svg>
          </button>
          <button class="weather-btn" data-w="rain" title="Yağmurlu">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M7 15a4 4 0 0 1-.6-8 5.5 5.5 0 0 1 10.6 1.2A3.4 3.4 0 0 1 17 15"/><path d="M8 18l-1 3M12 18l-1 3M16 18l-1 3"/></svg>
          </button>
          <button class="weather-btn" data-w="snow" title="Karlı">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v18M4 7.5l16 9M20 7.5l-16 9"/></svg>
          </button>
        </div>

        <div class="bb-group bb-toggle">
          <button class="toggle-btn" id="btn-xray">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2v20M2 12h20"/><circle cx="12" cy="12" r="9" stroke-dasharray="3 3"/></svg>
            X-RAY
          </button>
          <button class="toggle-btn" id="btn-ceiling" disabled>
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 7h18M3 7v13h18V7"/><path d="M7 7V3h10v4"/></svg>
            Tavan
          </button>
        </div>

        <div class="bb-group bb-elevator">
          <div class="elevator-readout">
            <div class="elev-cars">
              <span class="elev-badge" id="elev-a" data-car="A">A <b>Z</b></span>
              <span class="elev-badge" id="elev-b">B <b>Z</b></span>
            </div>
            <span class="elev-label">Asansör</span>
          </div>
          <div class="elev-btns" id="elev-btns"></div>
        </div>

        <div class="bb-group bb-energy">
          <div class="bb-label"><span>Tahmini Tüketim</span><strong id="energy-value">—</strong></div>
          <div class="energy-bar"><div class="energy-fill" id="energy-fill"></div></div>
        </div>
      </footer>
    </div>

    <div class="loading" id="loading">
      <div class="loading-inner">
        <svg class="loading-mark" viewBox="0 0 40 40" aria-hidden="true">
          <path d="M6 33V13l14-8 14 8v20" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
          <path d="M13 33V19h6v14M23 21h6v6h-6z" fill="none" stroke="currentColor" stroke-width="1.4"/>
        </svg>
        <div class="loading-title">NUMEX ARCHITECT 3D</div>
        <div class="loading-bar"><div class="loading-fill" id="loading-fill"></div></div>
        <div class="loading-step" id="loading-step">Sahne hazırlanıyor…</div>
      </div>
    </div>

    <script type="module" src="./src/main.ts"></script>
  </body>
</html>