hava-trafik/index.html

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>NUMEX CORE — SKY COMMAND · Otonom Hava Trafik Kontrol Simülatörü</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app">

  <!-- ÜST BAR -->
  <header id="topbar">
    <div class="brand">
      <span class="logo">◈</span>
      <div>
        <h1>NUMEX CORE <span class="dim">/</span> SKY COMMAND</h1>
        <p class="sub">Otonom Hava Trafik Kontrol Simülatörü — <b>KURGUSAL VERİ</b></p>
      </div>
    </div>

    <nav id="tabs">
      <button class="tab active" data-tab="radar">RADAR</button>
      <button class="tab" data-tab="airport">3D HAVALİMANI</button>
      <button class="tab" data-tab="ops">OPERASYON &amp; KRİZ</button>
    </nav>

    <div class="clock">
      <div id="simClock">06:12:00</div>
      <div class="clocklabel">SİM ZAMANI</div>
    </div>

    <div class="controls">
      <button id="btnPlay" class="btn primary" title="Simülasyonu duraklat/başlat">❚❚ DURAKLAT</button>
      <label class="sel">HIZ
        <select id="speed">
          <option value="0.5">0.5×</option>
          <option value="1" selected>1×</option>
          <option value="2">2×</option>
          <option value="4">4×</option>
        </select>
      </label>
      <button id="btnReset" class="btn" title="Simülasyonu sıfırla">SIFIRLA</button>
    </div>
  </header>

  <!-- KPI ŞERİDİ -->
  <div id="kpis" aria-label="Kritik göstergeler"></div>

  <!-- ============ RADAR SEKMESİ ============ -->
  <main id="view-radar" class="view active">
    <section class="panel" id="panel-flights">
      <div class="panel-head">
        <h2>Aktif Uçuşlar</h2>
        <span class="badge" id="flightCount">0</span>
      </div>
      <div class="filters">
        <input id="searchFlight" type="text" placeholder="uçuş kodu ara…" autocomplete="off" />
        <select id="filterState">
          <option value="all">Tüm durumlar</option>
          <option value="PARK">PARK</option>
          <option value="TAKSİ">TAKSİ</option>
          <option value="KALKIŞ SIRASI">KALKIŞ SIRASI</option>
          <option value="KALKIŞ">KALKIŞ</option>
          <option value="SEYİR">SEYİR</option>
          <option value="YAKLAŞMA">YAKLAŞMA</option>
          <option value="İNİŞ">İNİŞ</option>
        </select>
      </div>
      <ul id="flightList" role="listbox" aria-label="Aktif uçuş listesi"></ul>
      <div class="panel-foot">
        <label class="chk"><input type="checkbox" id="onlyEmergency" /> yalnız acil</label>
        <span class="dim tiny" id="listHint">satıra tıkla → seç</span>
      </div>
    </section>

    <section class="panel" id="panel-radar">
      <div class="panel-head">
        <h2>Canlı Radar</h2>
        <div class="radar-tools">
          <span class="legend"><i class="dot air"></i> havada</span>
          <span class="legend"><i class="dot gnd"></i> yerde</span>
          <span class="legend"><i class="dot emg"></i> acil</span>
          <label class="chk"><input type="checkbox" id="showTrail" checked /> iz</label>
          <label class="chk"><input type="checkbox" id="showLabels" checked /> etiket</label>
          <select id="radarRange" title="Radar menzili">
            <option value="15">15 km</option>
            <option value="30">30 km</option>
            <option value="50" selected>50 km</option>
            <option value="80">80 km</option>
          </select>
        </div>
      </div>
      <div class="radar-wrap">
        <canvas id="radar"></canvas>
        <div class="radar-frame"></div>
        <div class="radar-corner tl">LTFM / İSTANBUL</div>
        <div class="radar-corner tr" id="radarWx">WX —</div>
        <div class="radar-corner bl" id="radarScale">— km</div>
        <div class="radar-corner br">SİM · KURGUSAL</div>
      </div>
      <div class="radar-strip" id="radarStrip"></div>
    </section>

    <section class="panel" id="panel-detail">
      <div class="panel-head">
        <h2 id="detailTitle">Uçak Ayrıntıları</h2>
        <button class="mini" id="btnFollow" title="3D sahnede bu uçağı takip et" disabled>3D'DE TAKİP</button>
      </div>
      <div id="detailBody" class="scroll-y">
        <p class="empty">Radar veya listeden bir uçak seç.</p>
      </div>
    </section>
  </main>

  <!-- ============ 3D SEKMESİ ============ -->
  <main id="view-airport" class="view">
    <section class="panel full3d">
      <div class="panel-head">
        <h2>3D İstanbul Havalimanı — LTFM (simülasyon)</h2>
        <div class="camtools">
          <button class="mini cam" data-cam="orbit">SERBEST</button>
          <button class="mini cam" data-cam="tower">KULE</button>
          <button class="mini cam" data-cam="runway">PİST</button>
          <button class="mini cam" data-cam="apron">APRON</button>
          <button class="mini cam" data-cam="top">ÜSTTEN</button>
          <label class="chk"><input type="checkbox" id="wxNight" /> gece modu</label>
        </div>
      </div>
      <div id="threeWrap">
        <canvas id="three"></canvas>
        <div id="threeHud">
          <div id="followBox">TAKİP: <b id="followName">—</b> <button class="mini" id="btnUnfollow">BIRAK</button></div>
          <div id="threeInfo">Fare: sürükle=döndür · tekerlek=zoom · sağ tık=kaydır</div>
        </div>
        <div id="threeFps" class="fps">— FPS</div>
      </div>
    </section>
  </main>

  <!-- ============ OPERASYON SEKMESİ ============ -->
  <main id="view-ops" class="view">
    <section class="panel ops-left">
      <div class="panel-head"><h2>Kriz Senaryoları</h2><span class="dim tiny">tek tuş</span></div>
      <div class="scenarios">
        <button class="scn" data-scn="A"><b>A</b><span>Pist Kapandı</span><i>Bir pist hizmet dışı</i></button>
        <button class="scn" data-scn="B"><b>B</b><span>Acil İniş</span><i>Bir uçak 7700 bildirir</i></button>
        <button class="scn" data-scn="C"><b>C</b><span>Yakıt Kritik</span><i>Yakıt hızla düşer</i></button>
        <button class="scn" data-scn="D"><b>D</b><span>Hava Bozuldu</span><i>Görüş ve rüzgâr kötüleşir</i></button>
        <button class="scn danger" data-scn="E"><b>E</b><span>Çoklu Kriz</span><i>Pist + 2 yaklaşma + acil</i></button>
        <button class="scn calm" data-scn="R"><b>R</b><span>Toparlanma</span><i>Pistler/hava normale</i></button>
      </div>

      <div class="panel-head mt"><h2>Yetki Yönetimi</h2></div>
      <div class="auth">
        <div class="modes">
          <button class="mode active" data-mode="ONERI">ÖNERİ MODU</button>
          <button class="mode" data-mode="OTOMATIK">OTOMATİK SİMÜLASYON</button>
        </div>
        <p class="tiny dim" id="authDesc">Motor yalnızca öneri sunar. Uçuş durumunu kullanıcı onayı olmadan değiştiremez.</p>
        <div class="limits" id="autoLimits">
          <label>Otomatik yakıt sınırı: <b id="limFuelVal">40%</b>
            <input type="range" id="limFuel" min="5" max="100" value="40" step="5" />
          </label>
          <label class="chk"><input type="checkbox" id="limRwy" checked /> pist değişimine izin</label>
          <label class="chk"><input type="checkbox" id="limEmg" checked /> acil önceliğe izin</label>
        </div>
        <div class="dentry">Yetkisiz müdahale sayacı: <b id="denyCount">0</b></div>
      </div>

      <div class="panel-head mt"><h2>Hava Durumu</h2></div>
      <div id="wxPanel" class="wx"></div>
    </section>

    <section class="panel ops-right">
      <div class="panel-head">
        <h2>Uyarılar &amp; Kararlar</h2>
        <span id="alertSummary" class="badge warn">0</span>
      </div>
      <div id="alertList" class="scroll-y"></div>
    </section>
  </main>

  <!-- ============ ALT PANEL ============ -->
  <footer id="bottom">
    <div class="bottom-head">
      <h2>Olay Kayıtları</h2>
      <div class="btools">
        <select id="eventFilter">
          <option value="all">Tüm türler</option>
          <option value="STATE">Durum değişimi</option>
          <option value="ACT">Müdahale</option>
          <option value="DENY">Reddedilen</option>
          <option value="CRISIS">Kriz</option>
          <option value="RWY">Pist</option>
          <option value="SYS">Sistem</option>
        </select>
        <label class="chk"><input type="checkbox" id="autoScroll" checked /> otomatik kaydır</label>
        <button class="mini" id="btnAdvance" title="Simülasyonu 60 sn ilerlet">+60 sn</button>
      </div>
    </div>
    <div id="eventLog" class="scroll-y"></div>
  </footer>

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

<script src="vendor/three.min.js"></script>
<script src="sim.js"></script>
<script src="app.js"></script>
<script src="three-scene.js"></script>
<script src="tests.js"></script>
</body>
</html>