nexus-parcacik/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>NEXUS — Parçacık Akışı</title>
<meta name="description" content="NEXUS — 6000 parçacığa kadar canlı akış alanı simülasyonu. Fare, dokunma ve mikrofon girdisiyle etkileşimli görsel deney." />
<meta name="theme-color" content="#04060f" />
<!-- Satır-içi SVG favicon: ek istek yok, 404 yok -->
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%2304060f'/%3E%3Ccircle cx='32' cy='32' r='6' fill='%235eead4'/%3E%3Cellipse cx='32' cy='32' rx='22' ry='9' fill='none' stroke='%23818cf8' stroke-width='2.5'/%3E%3Cellipse cx='32' cy='32' rx='9' ry='22' fill='none' stroke='%235eead4' stroke-width='2.5'/%3E%3C/svg%3E" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<canvas id="stage"></canvas>

<header class="hud hud-top">
  <div class="brand">
    <span class="dot"></span>
    <div>
      <h1>NEXUS</h1>
      <p>Parçacık Akışı · canlı simülasyon</p>
    </div>
  </div>
  <div class="stats">
    <div class="stat"><span id="fps">60</span><small>FPS</small></div>
    <div class="stat"><span id="pcount">0</span><small>PARÇACIK</small></div>
    <div class="stat"><span id="energy">0</span><small>ENERJİ</small></div>
  </div>
</header>

<div class="hint" id="hint">Fareyi gezdir · dokun · basılı tut</div>

<footer class="hud hud-bottom">
  <div class="modes" id="modes">
    <button class="mode active" data-mode="flow">Akış</button>
    <button class="mode" data-mode="vortex">Girdap</button>
    <button class="mode" data-mode="explode">Patlama</button>
    <button class="mode" data-mode="orbit">Yörünge</button>
  </div>

  <div class="controls">
    <label class="ctl">
      <span>Yoğunluk</span>
      <input type="range" id="density" min="400" max="6000" step="100" value="2600" />
    </label>
    <label class="ctl">
      <span>Akış Hızı</span>
      <input type="range" id="speed" min="10" max="300" step="5" value="120" />
    </label>
    <label class="ctl">
      <span>İz</span>
      <input type="range" id="trail" min="4" max="60" step="1" value="22" />
    </label>
    <label class="ctl">
      <span>Renk</span>
      <input type="range" id="hue" min="0" max="360" step="1" value="190" />
    </label>
  </div>

  <div class="actions">
    <button id="audioBtn" class="btn primary">
      <svg viewBox="0 0 24 24" width="16" height="16"><path d="M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z" fill="currentColor"/></svg>
      <span id="audioLabel">Mikrofon ile Ses Modu</span>
    </button>
    <button id="colorBtn" class="btn">Renk Geçişi</button>
    <button id="resetBtn" class="btn">Sıfırla</button>
  </div>
</footer>

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