yercekimi-lab/index.html

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>NUMEX GRAVITY LAB — Yerçekimini Yönet</title>
<style>
  :root{
    --bg:#05060c;
    --panel:rgba(12,14,24,.72);
    --panel-brd:rgba(120,140,255,.18);
    --ink:#e8ecff;
    --ink-dim:#8e97bd;
    --accent:#5b8cff;
    --accent2:#a86bff;
    --gold:#ffc861;
    --font:"Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:var(--font);overflow:hidden;
    -webkit-font-smoothing:antialiased;
    user-select:none;
  }
  #stage{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}

  /* --- üst şerit --- */
  .topbar{
    position:fixed;top:0;left:0;right:0;display:flex;align-items:center;
    justify-content:space-between;gap:12px;padding:14px 18px;pointer-events:none;
  }
  .brand{display:flex;align-items:baseline;gap:10px;min-width:0}
  .brand h1{
    font-size:clamp(13px,1.15vw,16px);letter-spacing:.22em;margin:0;font-weight:600;
    color:var(--ink);white-space:nowrap;
  }
  .brand span{
    font-size:11px;letter-spacing:.16em;color:var(--ink-dim);text-transform:uppercase;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .hud{
    display:flex;gap:8px;align-items:center;pointer-events:auto;flex-wrap:wrap;justify-content:flex-end;
  }
  .chip{
    font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.08em;
    padding:6px 10px;border-radius:999px;background:rgba(10,13,24,.6);
    border:1px solid var(--panel-brd);color:var(--ink-dim);
  }
  .chip b{color:var(--ink);font-weight:600}
  .chip.fps-good b{color:#66e6a5}
  .chip.fps-mid b{color:var(--gold)}
  .chip.fps-bad b{color:#ff7a7a}

  /* --- kontrol paneli --- */
  .panel{
    position:fixed;top:64px;right:18px;width:min(300px, calc(100vw - 36px));
    background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid var(--panel-brd);border-radius:16px;
    padding:14px 16px 16px;display:flex;flex-direction:column;gap:13px;
    box-shadow:0 18px 50px rgba(0,0,0,.5);
    max-height:calc(100vh - 96px);overflow-y:auto;
    transition:transform .28s ease, opacity .28s ease;
  }
  .panel.hidden{transform:translateX(calc(100% + 26px));opacity:0;pointer-events:none}
  .panel h2{
    font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);
    margin:0 0 -4px;font-weight:600;
  }
  .row{display:flex;flex-direction:column;gap:6px}
  .row .lab{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ink-dim)}
  .row .lab b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;font-size:12px}
  input[type=range]{
    -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    outline:none;cursor:pointer;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
    background:#fff;box-shadow:0 0 0 3px rgba(91,140,255,.28);cursor:grab;
  }
  input[type=range]::-moz-range-thumb{
    width:14px;height:14px;border:0;border-radius:50%;background:#fff;
    box-shadow:0 0 0 3px rgba(91,140,255,.28);cursor:grab;
  }
  .swatches{display:flex;gap:8px}
  .sw{
    flex:1;height:26px;border-radius:8px;border:1px solid rgba(255,255,255,.14);
    cursor:pointer;position:relative;overflow:hidden;
  }
  .sw.on{box-shadow:0 0 0 2px rgba(255,255,255,.85) inset, 0 0 12px rgba(120,160,255,.5)}
  .sw i{position:absolute;inset:0;border-radius:8px;display:block}
  .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  button{
    font-family:var(--font);font-size:12px;letter-spacing:.04em;color:var(--ink);
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
    border-radius:10px;padding:9px 10px;cursor:pointer;transition:.15s;
    min-height:38px;
  }
  button:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.24)}
  button.on{background:linear-gradient(135deg,rgba(91,140,255,.4),rgba(168,107,255,.4));border-color:rgba(160,180,255,.6)}
  button.wide{grid-column:1 / -1}
  .hint{font-size:11px;line-height:1.7;color:var(--ink-dim);border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
  .hint kbd{
    font-family:inherit;font-size:10px;background:rgba(255,255,255,.09);
    border-radius:4px;padding:1px 5px;color:var(--ink);border:1px solid rgba(255,255,255,.1);
  }
  .panel-toggle{
    position:fixed;top:58px;right:18px;z-index:5;display:none;width:38px;height:38px;
    min-height:38px;padding:0;border-radius:12px;font-size:15px;
  }
  .panel-toggle.show{display:block}
  .toast{
    position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);
    background:rgba(12,15,26,.9);border:1px solid var(--panel-brd);color:var(--ink);
    padding:9px 16px;border-radius:999px;font-size:12px;letter-spacing:.03em;
    opacity:0;transition:.3s;pointer-events:none;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis;
  }
  .toast.show{opacity:1;transform:translate(-50%,0)}

  @media (max-width:760px){
    .panel{top:auto;bottom:16px;right:16px;left:16px;width:auto;max-height:52vh}
    .panel.hidden{transform:translateY(calc(100% + 24px))}
    .panel-toggle{display:block;top:14px;right:14px}
    .panel-toggle.show{display:block}
    .brand span{display:none}
    .hud .chip{padding:5px 8px;font-size:10px}
    .hint{display:none}
  }
  @media (max-width:420px){
    .topbar{padding:10px 12px}
    .hud{gap:5px}
  }
</style>
</head>
<body>
<canvas id="stage"></canvas>

<div class="topbar">
  <div class="brand">
    <h1>NUMEX GRAVITY LAB</h1>
    <span>Yerçekimini Yönet</span>
  </div>
  <div class="hud">
    <div class="chip" id="chipFps"><b>–</b> FPS</div>
    <div class="chip" id="chipCount">Parçacık <b>–</b></div>
    <div class="chip" id="chipMass">Kütle <b>0</b></div>
  </div>
</div>

<button class="panel-toggle" id="panelToggle" title="Paneli aç/kapat">⚙</button>

<div class="panel" id="panel">
  <h2>Fizik</h2>
  <div class="row">
    <div class="lab"><span>Yerçekimi gücü</span><b id="vGrav">1.00×</b></div>
    <input type="range" id="rGrav" min="0" max="4" step="0.05" value="1">
  </div>
  <div class="row">
    <div class="lab"><span>Parçacık sayısı</span><b id="vCount">3000</b></div>
    <input type="range" id="rCount" min="500" max="5000" step="100" value="3000">
  </div>
  <div class="row">
    <div class="lab"><span>İz uzunluğu</span><b id="vTrail">0.90</b></div>
    <input type="range" id="rTrail" min="0" max="0.97" step="0.01" value="0.9">
  </div>
  <div class="row">
    <div class="lab"><span>Hız</span><b id="vSpeed">1.00×</b></div>
    <input type="range" id="rSpeed" min="0.1" max="3" step="0.05" value="1">
  </div>

  <h2>Palet</h2>
  <div class="swatches" id="swatches"></div>

  <h2>Eylem</h2>
  <div class="btns">
    <button id="bCinema">Sinematik mod</button>
    <button id="bClear">Kütleleri sil</button>
    <button id="bReset" class="wide">Sıfırla</button>
    <button id="bAuto" class="wide">Otomatik kalite: açık</button>
  </div>

  <div class="hint">
    <kbd>Sol tık</kbd> çekim merkezi &nbsp;·&nbsp; <kbd>Sağ tık</kbd> itme<br>
    <kbd>Çift tık</kbd> kalıcı kütle &nbsp;·&nbsp; <kbd>Sürükle</kbd> kütleyi taşı<br>
    <kbd>Boşluk</kbd> duraklat &nbsp;·&nbsp; <kbd>H</kbd> panel
  </div>
</div>

<div class="toast" id="toast"></div>

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