keen-kalkulator

byHarry Mukti

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kalkulator Kadar Emas</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, sans-serif; } /* ===== LAYAR SAMPUl - EMAS BATANGAN ===== */ .splash { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: linear-gradient(180deg, #992200 0%, #cc7700 45%, #ffc800 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; transition: opacity 0.6s ease; } .batangan-kontainer { position: relative; margin-bottom: 30px; } .batangan { width: 220px; height: 100px; background: linear-gradient(180deg, #ffd700 0%, #e6b800 35%, #b8860b 70%, #8b6914 100%); border-radius: 12px; box-shadow: 0 8px 0 #996a00, 0 18px 30px rgba(0,0,0,0.35), inset 0 -12px 20px rgba(120,80,0,0.4), inset 0 8px 10px rgba(255,255,200,0.4); display: flex; align-items: center; justify-content: center; border: 3px solid #f5d300; } .batangan span { font-size: 28px; font-weight: 900; color: #6b4c00; letter-spacing: 4px; text-shadow: 0 1px 2px rgba(255,255,255,0.3); } .batangan-bawah { width: 190px; height: 85px; margin: -15px auto 0; background: linear-gradient(180deg, #e6c200 0%, #b8860b 100%); border-radius: 10px; opacity: 0.7; z-index: -1; box-shadow: 0 6px 15px rgba(0,0,0,0.25); } .splash-judul { font-size: 36px; font-weight: 900; color: #fff; text-align: center; text-shadow: 2px 3px 6px rgba(0,0,0,0.35); letter-spacing: 1px; } .splash-sub { color: #fff8dc; font-size: 15px; margin-top: 10px; text-shadow: 1px 2px 4px rgba(0,0,0,0.25); } .tombol-mulai { margin-top: 45px; padding: 15px 45px; font-size: 19px; font-weight: bold; background: #fff; color: #b8860b; border: none; border-radius: 50px; box-shadow: 0 6px 18px rgba(0,0,0,0.25); cursor: pointer; transition: transform 0.2s; } .tombol-mulai:active { transform: scale(0.96); } /* ===== HALAMAN KALKULATOR ===== */ .app { display: none; padding: 20px; background: #f8f4e8; min-height: 100vh; } .box { max-width: 420px; margin: auto; background: #fff; padding: 22px; border-radius: 18px; box-shadow: 0 4px 18px rgba(184,134,11,0.18); } h2 { text-align: center; margin-top: 0; color: #b8860b; font-size: 22px; } label { display: block; font-weight: bold; margin-top: 15px; margin-bottom: 6px; color: #444; } select, input { width: 100%; padding: 13px; font-size: 18px; border: 2px solid #e8d890; border-radius: 10px; background: #fffef5; } select:focus, input:focus { outline: none; border-color: #d4af37; } button { width: 100%; padding: 14px; margin-top: 18px; border: 0; border-radius: 10px; background: linear-gradient(90deg, #b8860b, #d4af37); color: white; font-size: 18px; font-weight: bold; cursor: pointer; } .reset { background: #999; margin-top: 8px; } .hasil { margin-top: 20px; padding: 18px; background: #fff8dc; border-radius: 12px; border-left: 4px solid #d4af37; line-height: 1.7; } .emas { font-size: 30px; font-weight: bold; text-align: center; color: #b8860b; } .karat { font-size: 21px; font-weight: bold; text-align: center; color: #8b6914; } .manual { display: none; } .warning { margin-top: 12px; padding: 10px; background: #fef0e0; border-radius: 8px; font-size: 13px; color: #a05a20; } </style> </head> <body> <!-- ===== LAYAR SAMPUL - EMAS BATANGAN ===== --> <div class="splash" id="layarDepan"> <div class="batangan-kontainer"> <div class="batangan"><span>EMAS</span></div> <div class="batangan-bawah"></div> </div> <h1 class="splash-judul">Estimasi Kadar Emas</h1> <p class="splash-sub">Hitung kadar & karat dengan metode berat jenis</p> <button class="tombol-mulai" onclick="bukaAplikasi()">MULAI HITUNG</button> </div> <!-- ===== KALKULATOR ===== --> <div class="app" id="halamanAplikasi"> <div class="box"> <h2>🥇 Kalkulator Kadar Emas</h2> <label>Jenis Campuran</label> <select id="metode" onchange="ubahMetode()"> <option value="tembaga"> Emas + Tembaga </option> <option value="perak"> Emas + Perak </option> <option value="timah"> Emas + Timah </option> <option value="manual"> Emas + Manual </option> </select> <div id="manual" class="manual"> <label>Berat Jenis Logam Manual</label> <input type="number" id="bjManual" step="0.01" placeholder="Contoh: 8.50"> </div> <label>Berat Timbang di Udara (gram)</label> <input type="number" id="berat" step="0.01" inputmode="decimal" placeholder="Contoh: 2.77" oninput="hitung()"> <label>Selisih Timbangan Dalam Air (gram)</label> <input type="number" id="selisih" step="0.01" inputmode="decimal" placeholder="Contoh: 0.17" oninput="hitung()"> <button onclick="hitung()"> HITUNG </button> <button class="reset" onclick="resetForm()"> RESET </button> <div class="hasil" id="hasil"> Masukkan berat di udara dan selisih dalam air. </div> </div> </div> <script> function bukaAplikasi() { document.getElementById('layarDepan').style.opacity = '0'; setTimeout(() => { document.getElementById('layarDepan').style.display = 'none'; document.getElementById('halamanAplikasi').style.display = 'block'; }, 600); } function ubahMetode() { let metode = document.getElementById("metode").value; let manual = document.getElementById("manual"); manual.style.display = metode === "manual" ? "block" : "none"; hitung(); } function hitung() { let berat = parseFloat(document.getElementById("berat").value); let selisih = parseFloat(document.getElementById("selisih").value); let metode = document.getElementById("metode").value; let hasil = document.getElementById("hasil"); if (isNaN(berat) || isNaN(selisih) || berat <= 0 || selisih <= 0) { hasil.innerHTML = "Masukkan berat di udara dan selisih dalam air."; return; } let beratDalamAir = berat - selisih; if (beratDalamAir <= 0) { hasil.innerHTML = "⚠️ Selisih tidak boleh lebih besar dari berat."; return; } let BJ = berat / selisih; let BJlogam, namaLogam; if (metode === "tembaga") { BJlogam = 8.96; namaLogam = "Tembaga"; } else if (metode === "perak") { BJlogam = 10.49; namaLogam = "Perak"; } else if (metode === "timah") { BJlogam = 7.31; namaLogam = "Timah"; } else { BJlogam = parseFloat(document.getElementById("bjManual").value); namaLogam = "Logam Manual"; if (isNaN(BJlogam) || BJlogam <= 0) { hasil.innerHTML = "Masukkan berat jenis logam manual."; return; } } let emas = ((1 / BJ) - (1 / BJlogam)) / ((1 / 19.32) - (1 / BJlogam)); let persenEmas = emas * 100; if (persenEmas < 0 || persenEmas > 100) { hasil.innerHTML = `<b>⚠️ HASIL TIDAK VALID</b><br><br> Berat udara: ${berat.toFixed(2)} g<br> Selisih air: ${selisih.toFixed(2)} g<br> Berat setelah dikurangi selisih: ${beratDalamAir.toFixed(2)} g<br><br> Berat jenis: ${BJ.toFixed(3)} g/cm³<br><br> Model Emas + ${namaLogam} tidak cocok dengan angka tersebut.`; return; } let persenLogam = 100 - persenEmas; let beratEmas = berat * persenEmas / 100; let beratLogam = berat * persenLogam / 100; let karat = persenEmas * 24 / 100; hasil.innerHTML = `<b>HASIL PERHITUNGAN</b><br><br> Metode: <b>Emas + ${namaLogam}</b><br><br> Berat udara: ${berat.toFixed(2)} gram<br> Selisih dalam air: ${selisih.toFixed(2)} gram<br> Berat dalam air otomatis: ${beratDalamAir.toFixed(2)} gram<br><br> Berat jenis benda: ${BJ.toFixed(3)} g/cm³<br><br> <div class='emas'>${persenEmas.toFixed(2)}% EMAS</div> <div class='karat'>≈ ${karat.toFixed(2)} Karat</div><br> 🥇 Berat emas: ${beratEmas.toFixed(3)} gram<br> 🔩 ${namaLogam}: ${persenLogam.toFixed(2)}% (${beratLogam.toFixed(3)} gram)`; } function resetForm() { document.getElementById("berat").value = ""; document.getElementById("selisih").value = ""; document.getElementById("bjManual").value = ""; document.getElementById("metode").value = "tembaga"; document.getElementById("manual").style.display = "none"; document.getElementById("hasil").innerHTML = "Masukkan berat di udara dan selisih dalam air."; } </script> </body> </html>