has-ziynet

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <title>Has & Ziynet</title>

  <link rel="apple-touch-icon" href="https://upload.wikimedia.org/wikipedia/commons/5/5e/Gold_icon.png">

  <style>
    :root { --neon:#00ff66; }
    body{margin:0;background:#000;color:#fff;font-family:Arial,system-ui;padding:14px}
    .top{display:flex;align-items:center;gap:10px;justify-content:center;margin:6px 0 10px}
    .top img{width:54px;height:54px;border-radius:12px}
    h1{margin:0;color:gold;font-size:22px;letter-spacing:.5px}
    .card{border:1px solid #2a2a2a;border-radius:12px;padding:12px;margin:10px 0;background:#070707}
    label{display:block;font-size:14px;opacity:.9;margin-bottom:6px}
    input,select,button{width:100%;padding:12px;border-radius:10px;border:none;font-size:18px}
    input,select{background:#151515;color:#fff}
    button{background:var(--neon);font-weight:800}
    .row{display:flex;gap:10px}
    .row>div{flex:1}
    .seg{display:flex;gap:10px;margin-top:8px}
    .seg button{background:#2a2a2a;color:#fff;font-weight:800}
    .seg .on{background:gold;color:#000}
    .out{margin-top:10px;font-size:20px}
    .gold{color:gold;font-weight:800}
    .green{color:var(--neon);font-weight:900}
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .small{font-size:13px;opacity:.75;margin-top:6px;line-height:1.35}
  </style>
</head>
<body>

  <div class="top">
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Gold_icon.png" alt="logo">
    <h1>HAS & ZİYNET</h1>
  </div>

  <div class="card">
    <label>Has Alış (₺) — sen gir</label>
    <input id="hasFiyat" inputmode="decimal" placeholder="Örn: 6447" />

    <div class="seg">
      <button id="b995" class="on" type="button" onclick="setRef(995)">995</button>
      <button id="b999" type="button" onclick="setRef(999.99)">999.99</button>
    </div>
    <div class="small">Referans değişince tüm hesaplar otomatik güncellenir.</div>
  </div>

  <div class="card">
    <label>Gram / Ayar</label>
    <div class="row">
      <div><input id="gram" inputmode="decimal" placeholder="Gram (örn: 7.35)"></div>
      <div>
        <select id="ayar">
          <option value="585">14 Ayar (585)</option>
          <option value="750">18 Ayar (750)</option>
          <option value="916" selected>22 Ayar (916)</option>
          <option value="995">24 Ayar (995)</option>
        </select>
      </div>
    </div>
    <button type="button" onclick="calcGram()">Hesapla</button>
    <div id="outGram" class="out"></div>
  </div>

  <div class="card">
    <label>Ziynet</label>
    <div class="grid">
      <button type="button" onclick="calcZiynet('Çeyrek',1.75)">Çeyrek</button>
      <button type="button" onclick="calcZiynet('Ata',7.216)">Ata</button>
      <button type="button" onclick="calcZiynet('Gram',1.00)">Gram</button>
      <button type="button" onclick="calcZiynet('Yarım',3.50)">Yarım</button>
    </div>
    <div id="outZiynet" class="out"></div>
  </div>

  <div class="card">
    <label>Özel Ürünler</label>
    <div class="grid">
      <button type="button" onclick="calcOzel('0.50 gr 24 Ayar',0.5,995)">0.50 gr 24</button>
      <button type="button" onclick="calcOzel('0.50 gr 22 Ayar',0.5,916)">0.50 gr 22</button>
      <button type="button" onclick="calcOzel('1 gr 22 Ayar',1,916)">1 gr 22</button>
      <button type="button" onclick="calcOzel('2.5 gr 24 Ayar',2.5,995)">2.5 gr 24</button>
    </div>
    <div id="outOzel" class="out"></div>
  </div>

<script>
  let ref = 995;
  function setRef(v){
    ref = v;
    document.getElementById('b995').classList.toggle('on', v===995);
    document.getElementById('b999').classList.toggle('on', v!==995);
  }
  function getFiyat(){
    const f = Number(String(document.getElementById('hasFiyat').value).replace(',','.'));
    return isFinite(f) ? f : 0;
  }
  function fmt(n, d){ return (Math.round(n * (10**d)) / (10**d)).toFixed(d); }

  function calcGram(){
    const g = Number(String(document.getElementById('gram').value).replace(',','.'));
    const a = Number(document.getElementById('ayar').value);
    const f = getFiyat();
    if(!g || !a){ document.getElementById('outGram').innerHTML = ""; return; }
    const has = (g * a) / ref;
    const tl  = has * f;
    document.getElementById('outGram').innerHTML =
      `<div class="gold">Has: ${fmt(has,3)} gr</div>
       <div class="green">TL: ${fmt(tl,2)} ₺</div>`;
  }

  function calcZiynet(ad, hasGr){
    const f = getFiyat();
    const tl = hasGr * f;
    document.getElementById('outZiynet').innerHTML =
      `<div class="gold">${ad} Has: ${fmt(hasGr,3)} gr</div>
       <div class="green">TL: ${fmt(tl,2)} ₺</div>`;
  }

  function calcOzel(ad, gram, ayarM){
    const f = getFiyat();
    const has = (gram * ayarM) / ref;
    const tl  = has * f;
    document.getElementById('outOzel').innerHTML =
      `<div class="gold">${ad} → Has: ${fmt(has,3)} gr</div>
       <div class="green">TL: ${fmt(tl,2)} ₺</div>`;
  }
</script>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

has-ziynet #69

HAS & ZİYNET

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

has-ziynet #69

Description

HAS & ZİYNET

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions