ZeroEngine HUD kompak

<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ZeroEngine HUD kompak</title>
<style>
  :root{
    /* token dari implementasi: skala radius app 32/24/16/12, hairline 12%, ramp termal */
    --sheet:#161d26;
    --sheet-2:#0b1016;
    --plate:#202b33;
    --plate-2:#161d24;
    --tile:rgba(255,255,255,.08);
    --tile-2:rgba(255,255,255,.04);
    --hair:rgba(255,255,255,.12);
    --on:#f2f5f7;
    --on-2:rgba(242,245,247,.62);
    --teal:#5ac8c0;
    --amber:#f0b45a;
    --coral:#f2705a;
    --r-sheet:32px; --r-card:24px; --r-tile:16px; --r-chip:12px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    background:#070a0d;color:var(--on);
    font-family:"Inter","Roboto",system-ui,sans-serif;
    padding:28px 24px 40px;-webkit-font-smoothing:antialiased;
  }
  .head{max-width:1180px;margin:0 auto 22px}
  .head h1{font-size:19px;font-weight:650;letter-spacing:-.2px}
  .head p{font-size:13px;color:var(--on-2);margin-top:6px;line-height:1.5}
  .grid{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
  .variant{display:flex;flex-direction:column;gap:10px}
  .vlabel{font-size:12px;color:var(--on-2);letter-spacing:.06em;text-transform:uppercase}
  .vlabel b{color:var(--on);letter-spacing:0;text-transform:none;font-weight:600}

  /* panggung game landscape 880x406dp, 1dp = 1px */
  .stage{
    position:relative;width:880px;height:406px;border-radius:18px;overflow:hidden;
    background:
      radial-gradient(120% 90% at 72% 18%, #23313b 0%, #131a20 46%, #0a0e12 100%);
    box-shadow:0 24px 60px rgba(0,0,0,.55);
  }
  /* siluet HUD game biar kelihatan mana yang ketutupan */
  .ghud{position:absolute;border-radius:10px;background:rgba(255,255,255,.05)}
  .ghud.minimap{left:26px;top:22px;width:132px;height:132px;border-radius:16px;background:rgba(255,255,255,.06)}
  .ghud.kill{right:26px;top:22px;width:190px;height:58px}
  .ghud.ammo{right:26px;bottom:26px;width:150px;height:64px}
  .ghud.squad{left:26px;bottom:26px;width:210px;height:52px}
  .ghud.cross{left:50%;top:46%;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.1)}

  /* ---- panel lama: 344dp, full height ---- */
  .old{position:absolute;left:0;top:0;width:344px;height:100%;background:var(--sheet);
    border-radius:0 var(--r-sheet) var(--r-sheet) 0;padding:16px 16px 24px;
    display:flex;flex-direction:column;gap:12px}
  .old .hdr{display:flex;align-items:center;gap:12px}
  .ico{width:40px;height:40px;border-radius:14px;background:var(--tile);flex:0 0 auto}
  .old .ttl{font-size:15px;font-weight:650}
  .old .sub{font-size:11px;color:var(--on-2);margin-top:2px}
  .old .time{margin-left:auto;font-size:12px;color:var(--on-2);font-variant-numeric:tabular-nums}
  .hero{background:var(--plate);border-radius:var(--r-card);padding:14px 14px 12px}
  .hero .cap{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-2)}
  .hero .big{display:flex;align-items:baseline;gap:8px;margin-top:4px}
  .hero .big span:first-child{font-size:44px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
  .hero .big em{font-style:normal;font-size:11px;color:var(--on-2)}
  .hero .big .min{margin-left:auto;font-size:11px;color:var(--on-2);font-variant-numeric:tabular-nums}
  .tri{display:flex;gap:8px}
  .tri > div{flex:1;background:var(--tile);border-radius:var(--r-tile);padding:9px 9px 10px}
  .tri .l{font-size:10px;color:var(--on-2)}
  .tri .v{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:3px}
  .v.amber{color:var(--amber)}
  .duo{display:flex;gap:8px}
  .duo > div{flex:1;background:var(--tile);border-radius:var(--r-tile);padding:10px 12px 11px}
  .duo .v{font-size:16px;font-weight:650;font-variant-numeric:tabular-nums}
  .duo .s{font-size:10px;color:var(--on-2);margin-top:3px;font-variant-numeric:tabular-nums}
  .pills{display:flex;gap:4px;margin-top:auto}
  .pills span{flex:1;text-align:center;font-size:11px;padding:9px 4px;border-radius:var(--r-chip);
    background:var(--tile-2);color:var(--on-2)}
  .pills span.on{background:rgba(90,200,192,.18);color:var(--teal);font-weight:600}

  /* ---- varian kompak ---- */
  .card{
    position:absolute;left:14px;top:14px;width:208px;background:var(--sheet);
    border-radius:var(--r-card);padding:12px;display:flex;flex-direction:column;gap:10px;
    box-shadow:0 14px 34px rgba(0,0,0,.45)}
  .card .hdr{display:flex;align-items:center;gap:8px}
  .card .ico{width:20px;height:20px;border-radius:7px}
  .card .ttl{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card .time{margin-left:auto;font-size:10px;color:var(--on-2);font-variant-numeric:tabular-nums}
  .card .fpsrow{display:flex;align-items:baseline;gap:6px;margin-top:-2px}
  .card .fpsrow .n{font-size:38px;font-weight:700;line-height:.95;font-variant-numeric:tabular-nums}
  .card .fpsrow .u{font-size:10px;color:var(--on-2);letter-spacing:.04em}
  .card .fpsrow .min{margin-left:auto;font-size:10px;color:var(--on-2);font-variant-numeric:tabular-nums}
  .spark{display:block;width:100%;height:40px}
  .quad{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .quad > div{background:var(--tile);border-radius:12px;padding:7px 8px 8px}
  .quad .v{font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
  .quad .s{font-size:9px;color:var(--on-2);margin-top:2px;font-variant-numeric:tabular-nums}
  .quad .v.amber{color:var(--amber)}
  .card .pills{margin-top:2px}
  .card .pills span{font-size:10px;padding:7px 2px}

  /* strip minimal */
  .strip{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:10px;
    background:var(--sheet);border-radius:999px;padding:8px 14px 8px 12px;
    box-shadow:0 12px 28px rgba(0,0,0,.45)}
  .strip .n{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
  .strip .u{font-size:9px;color:var(--on-2);letter-spacing:.05em}
  .strip .sep{width:1px;height:20px;background:var(--hair)}
  .strip .m{font-size:11px;color:var(--on-2);font-variant-numeric:tabular-nums}
  .strip .m b{color:var(--on);font-weight:600}
  .strip svg{display:block}

  /* beacon */
  .beacon{position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:7px;height:132px;border-radius:7px 0 0 7px;background:var(--tile);overflow:hidden}
  .beacon i{position:absolute;left:0;bottom:0;width:100%;height:62%;
    background:linear-gradient(0deg,var(--teal),rgba(90,200,192,.35));border-radius:7px 0 0 7px}
  .beacon b{position:absolute;left:-19px;top:50%;transform:translateY(-50%);
    width:6px;height:6px;border-radius:50%;background:var(--teal)}
  .bnote{position:absolute;right:16px;top:calc(50% + 84px);font-size:10px;color:var(--on-2)}

  .meta{font-size:12px;color:var(--on-2);line-height:1.5;max-width:880px}
  .meta b{color:var(--on);font-weight:600}
</style>
</head>
<body>
<div class="head">
  <h1>ZeroEngine in-game HUD: panel sekarang vs tiga usulan kompak</h1>
  <p>Skala 1dp = 1px, panggung 880x406dp (landscape onyx). Token warna, radius, dan ramp termal sama dengan implementasi, bukan palet baru.</p>
</div>

<div class="grid">
  <div class="variant">
    <div class="vlabel"><b>Sekarang</b> &middot; 344dp &times; full height, nutup 39% layar</div>
    <div class="stage">
      <div class="ghud minimap"></div><div class="ghud kill"></div>
      <div class="ghud ammo"></div><div class="ghud squad"></div><div class="ghud cross"></div>
      <div class="old">
        <div class="hdr">
          <div class="ico"></div>
          <div><div class="ttl">Garena Delta Force</div><div class="sub">Performance profile</div></div>
          <div class="time">07.14</div>
        </div>
        <div class="hero">
          <div class="cap">Frames</div>
          <div class="big"><span>60</span><em>FPS</em><span class="min">min 41</span></div>
          <svg class="spark" viewBox="0 0 300 44" preserveAspectRatio="none">
            <line x1="0" y1="30" x2="300" y2="30" stroke="rgba(255,255,255,.10)" stroke-width="1"/>
            <path d="M0,26 L20,22 L40,27 L60,18 L80,23 L100,15 L120,20 L140,13 L160,19 L180,11 L200,16 L220,9 L240,14 L260,8 L280,12 L300,7"
              fill="none" stroke="#5ac8c0" stroke-width="1.6"/>
          </svg>
        </div>
        <div class="tri">
          <div><div class="l">Battery</div><div class="v">99%</div></div>
          <div><div class="l">Board</div><div class="v">30,1&deg;</div></div>
          <div><div class="l">CPU</div><div class="v amber">53,3&deg;</div></div>
        </div>
        <div class="duo">
          <div><div class="v">33%</div><div class="s">CPU 2,21 GHz</div></div>
          <div><div class="v">12%</div><div class="s">GPU 264 MHz</div></div>
        </div>
        <div class="pills"><span class="on">Performance</span><span>Balanced</span><span>Battery</span></div>
      </div>
    </div>
  </div>

  <div class="variant">
    <div class="vlabel"><b>A. Kartu kompak</b> &middot; 208dp &times; 290dp, semua data tetap ada, alat &amp; app pindah ke sheet saat diketuk</div>
    <div class="stage">
      <div class="ghud minimap"></div><div class="ghud kill"></div>
      <div class="ghud ammo"></div><div class="ghud squad"></div><div class="ghud cross"></div>
      <div class="card">
        <div class="hdr"><div class="ico"></div><div class="ttl">Garena Delta Force</div><div class="time">07.14</div></div>
        <div class="fpsrow"><span class="n">60</span><span class="u">FPS</span><span class="min">min 41</span></div>
        <svg class="spark" viewBox="0 0 184 40" preserveAspectRatio="none">
          <line x1="0" y1="26" x2="184" y2="26" stroke="rgba(255,255,255,.10)" stroke-width="1"/>
          <path d="M0,24 L14,20 L28,25 L42,16 L56,21 L70,13 L84,18 L98,11 L112,17 L126,9 L140,14 L154,8 L168,12 L184,7"
            fill="none" stroke="#5ac8c0" stroke-width="1.6"/>
        </svg>
        <div class="quad">
          <div><div class="v">33%</div><div class="s">CPU 2,21 GHz</div></div>
          <div><div class="v">12%</div><div class="s">GPU 264 MHz</div></div>
          <div><div class="v amber">53,3&deg;</div><div class="s">CPU temp</div></div>
          <div><div class="v">30,1&deg;</div><div class="s">Board &middot; 99%</div></div>
        </div>
        <div class="pills"><span class="on">Performance</span><span>Balanced</span><span>Battery</span></div>
      </div>
    </div>
  </div>

  <div class="variant">
    <div class="vlabel"><b>B. Strip satu baris</b> &middot; 348dp &times; 42dp, ketuk untuk buka kartu</div>
    <div class="stage">
      <div class="ghud minimap"></div><div class="ghud kill"></div>
      <div class="ghud ammo"></div><div class="ghud squad"></div><div class="ghud cross"></div>
      <div class="strip">
        <span class="n">60</span><span class="u">FPS<br>min 41</span>
        <span class="sep"></span>
        <span class="m"><b>33%</b> CPU &middot; 53&deg;</span>
        <span class="sep"></span>
        <span class="m"><b>12%</b> GPU</span>
        <span class="sep"></span>
        <svg width="72" height="20" viewBox="0 0 72 20" preserveAspectRatio="none">
          <path d="M0,13 L8,10 L16,14 L24,7 L32,11 L40,6 L48,10 L56,5 L64,9 L72,4"
            fill="none" stroke="#5ac8c0" stroke-width="1.5"/>
        </svg>
      </div>
    </div>
  </div>

  <div class="variant">
    <div class="vlabel"><b>C. Beacon</b> &middot; 7dp &times; 132dp di tepi kanan, nol area game ketutupan</div>
    <div class="stage">
      <div class="ghud minimap"></div><div class="ghud kill"></div>
      <div class="ghud ammo"></div><div class="ghud squad"></div><div class="ghud cross"></div>
      <div class="beacon"><i></i><b></b></div>
      <div class="bnote">ketuk beacon &rarr; kartu A</div>
    </div>
  </div>
</div>

<div class="meta" style="max-width:1180px;margin:22px auto 0">
  Semua varian memakai <b>surface #161d26</b>, tile <b>8% putih</b>, hairline <b>12%</b>, radius <b>24</b> kartu / <b>12</b> chip,
  aksen teal <b>#5ac8c0</b> dan amber <b>#f0b45a</b> untuk suhu, angka <b>tabular</b>.
</div>
</body>
</html>