<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
:root { --primary: #8b0000; --bg: #f4f4f4; --card: #ffffff; }
.app-container { font-family: 'Segoe UI', Arial, sans-serif; max-width: 100%; background: var(--bg); padding: 10px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); color: #333; }
.tab-menu { display: flex; gap: 4px; margin-bottom: 10px; }
.tab-btn { flex: 1; padding: 8px 2px; cursor: pointer; border: none; background: #ccc; border-radius: 4px; font-weight: bold; font-size: 11px; }
.tab-btn.active { background: var(--primary); color: white; }
.app-section { display: none; background: var(--card); padding: 15px; border-radius: 8px; border: 1px solid #ddd; }
.app-section.active { display: block; }
/* Cek Lahir Style */
#birth { background: #6dbb6d; border: none; }
#birth h3 { color: #1e4d1e; font-size: 18px; text-shadow: 0.5px 0.5px #fff; }
/* Kalkulator BMB */
#calc { background: #4a0000; color: white; }
.calc-display { width: 100%; text-align: right; font-size: 22px; background: #220000; color: #00ff00; padding: 10px; border: 2px solid #8b0000; margin-bottom: 10px; font-family: monospace; box-sizing: border-box; }
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.calc-grid button { background: #8b0000; color: white; border: 1px solid #550000; padding: 12px; font-size: 16px; cursor: pointer; border-radius: 4px; }
input, .btn-main { width: 100%; padding: 10px; margin: 5px 0; border-radius: 5px; border: 1px solid #ddd; box-sizing: border-box; }
.btn-main { background: var(--primary); color: white; border: none; cursor: pointer; font-weight: bold; font-size: 14px; }
/* Result Box dengan Referensi */
.result-box { margin-top: 15px; padding: 12px; background: #fff9db; border-left: 6px solid #f59e0b; font-size: 15px; color: #222; line-height: 1.5; border-radius: 4px; }
.saran-wrapper { margin-top: 10px; font-size: 13px; font-weight: normal; border-top: 1px solid #e5e7eb; padding-top: 10px; }
.label-saran { color: #b45309; font-weight: bold; }
.label-tindakan { color: #15803d; font-weight: bold; }
</style>
</head>
<body>
<div class="app-container">
<div class="tab-menu">
<button class="tab-btn" onclick="openApp('calc')">Kalkulator</button>
<button class="tab-btn active" onclick="openApp('bmi')">BMI</button>
<button class="tab-btn" onclick="openApp('birth')">Cek Lahir</button>
</div>
<div id="calc" class="app-section">
<h3>Kalkulator BMB</h3>
<input type="text" id="display" class="calc-display" disabled value="0">
<div class="calc-grid">
<button onclick="clearCalc()" style="background:#ef4444">C</button>
<button onclick="backspace()"><</button>
<button onclick="press('/')">/</button>
<button onclick="press('*')">x</button>
<button onclick="press('7')">7</button>
<button onclick="press('8')">8</button>
<button onclick="press('9')">9</button>
<button onclick="press('-')">-</button>
<button onclick="press('4')">4</button>
<button onclick="press('5')">5</button>
<button onclick="press('6')">6</button>
<button onclick="press('+')">+</button>
<button onclick="press('1')">1</button>
<button onclick="press('2')">2</button>
<button onclick="press('3')">3</button>
<button onclick="calculate()" style="grid-row: span 2; background:#b91c1c">=</button>
<button onclick="press('0')" style="grid-column: span 2">0</button>
<button onclick="press('.')">.</button>
</div>
</div>
<div id="bmi" class="app-section active">
<h3>Penghitung BMI</h3>
<input type="number" id="weight" placeholder="Berat Badan (kg)">
<input type="number" id="height" placeholder="Tinggi Badan (cm)">
<button class="btn-main" onclick="hitungBMI()">Analisis Berat Badan</button>
<div id="bmiResult" class="result-box" style="display:none"></div>
</div>
<div id="birth" class="app-section">
<h3>Data Kelahiran Lengkap</h3>
<input type="date" id="birthDate">
<button class="btn-main" onclick="cekLengkap()">Cek Sekarang</button>
<div id="birthResult" class="result-box" style="display:none"></div>
</div>
</div>
<script>
function openApp(n) {
document.querySelectorAll('.app-section').forEach(s => s.classList.remove('active'));
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
document.getElementById(n).classList.add('active');
event.currentTarget.classList.add('active');
}
let disp = document.getElementById('display');
function press(v) { (disp.value === "0") ? disp.value = v : disp.value += v; }
function clearCalc() { disp.value = "0"; }
function backspace() { disp.value = disp.value.slice(0, -1) || "0"; }
function calculate() { try { disp.value = eval(disp.value); } catch { disp.value = "Error"; } }
function hitungBMI() {
let w = parseFloat(document.getElementById('weight').value), h = parseFloat(document.getElementById('height').value)/100;
if(w && h) {
let bmi = (w/(h*h)).toFixed(1);
let cat = "", saran = "", aksi = "";
if(bmi < 18.5) {
cat = "Berat Badan Kurang";
saran = "Tingkatkan asupan kalori dengan makanan bergizi (bukan junk food) untuk meningkatkan massa otot.";
aksi = "Konsultasi ke ahli gizi untuk mengevaluasi potensi kondisi medis atau malnutrisi.";
} else if(bmi < 25) {
cat = "Berat Badan Normal";
saran = "Pertahankan gaya hidup sehat.";
aksi = "Fokus pada pola makan seimbang dan olahraga rutin untuk menjaga massa otot dan kesehatan jantung.";
} else if(bmi < 30) {
cat = "Kelebihan Berat Badan";
saran = "Kurangi asupan kalori secara bertahap dan tingkatkan aktivitas fisik.";
aksi = "Mulai olahraga kardio (bersepeda, jalan cepat) dan kurangi konsumsi gula serta makanan olahan.";
} else {
cat = "Obesitas";
saran = "Konsultasi medis wajib dilakukan untuk menurunkan risiko penyakit kronis (diabetes, jantung).";
aksi = "Membuat program penurunan berat badan terukur dengan dokter atau ahli gizi.";
}
let r = document.getElementById('bmiResult');
r.style.display="block";
r.innerHTML = `<b>BMI: ${bmi} (${cat})</b>
<div class="saran-wrapper">
<span class="label-saran">Saran:</span> ${saran}<br><br>
<span class="label-tindakan">Tindakan:</span> ${aksi}
</div>`;
}
}
function getHijri(date) {
let jd = Math.floor((date.getTime() / 86400000) + 2440587.5);
let l = jd - 1948440 + 10632 + 1;
let n = Math.floor((l - 1) / 10631);
l = l - 10631 * n + 354;
let j = (Math.floor((10985 - l) / 5316)) * (Math.floor((50 * l) / 17719)) + (Math.floor(l / 5670)) * (Math.floor((43 * l) / 15238));
l = l - (Math.floor((30 - j) / 15)) * (Math.floor((17719 * j) / 50)) - (Math.floor(j / 16)) * (Math.floor((15238 * j) / 43)) + 29;
let m = Math.floor((24 * l) / 709);
let d = l - Math.floor((709 * m) / 24);
let y = 30 * n + j - 30;
return d + " " + ["Muharram","Safar","Rabiul Awal","Rabiul Akhir","Jumadil Awal","Jumadil Akhir","Rajab","Sya'ban","Ramadan","Syawal","Zulkaidah","Zulhijah"][m-1] + " " + y;
}
function cekLengkap() {
let val = document.getElementById('birthDate').value;
if(!val) return;
let d = new Date(val);
let nHari = ["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"][d.getDay()];
let pasaran = ["Legi","Pahing","Pon","Wage","Kliwon"];
let diff = Math.floor((d.getTime() - new Date(1900, 0, 1).getTime()) / 86400000);
let nPasaran = pasaran[(diff + 3) % 5];
let h_res = getHijri(d);
let m = d.getMonth()+1, t = d.getDate(), z = "";
if((m==3&&t>=21)||(m==4&&t<=19)) z="Aries"; else if((m==4&&t>=20)||(m==5&&t<=20)) z="Taurus";
else if((m==5&&t>=21)||(m==6&&t<=20)) z="Gemini"; else if((m==6&&t>=21)||(m==7&&t<=22)) z="Cancer";
else if((m==7&&t>=23)||(m==8&&t<=22)) z="Leo"; else if((m==8&&t>=23)||(m==9&&t<=22)) z="Virgo";
else if((m==9&&t>=23)||(m==10&&t<=22)) z="Libra"; else if((m==10&&t>=23)||(m==11&&t<=21)) z="Scorpio";
else if((m==11&&t>=22)||(m==12&&t<=21)) z="Sagitarius"; else if((m==12&&t>=22)||(m==1&&t<=19)) z="Capricorn";
else if((m==1&&t>=20)||(m==2&&t<=18)) z="Aquarius"; else z="Pisces";
let s = ["Monyet","Ayam","Anjing","Babi","Tikus","Kerbau","Macan","Kelinci","Naga","Ular","Kuda","Kambing"][d.getFullYear()%12];
let res = document.getElementById('birthResult');
res.style.display = "block";
res.innerHTML = `Hari: ${nHari} ${nPasaran}<br>Hijriyah: ${h_res} H<br>Bintang: ${z}<br>Shio: ${s}`;
}
</script>
</body>
</html>
Scrip html Blogger App 3 in 1: Kalkulator-BMI-Cek Hari Lahir
Reviewed by Chandra, SKM
on
April 11, 2026
Rating:
Reviewed by Chandra, SKM
on
April 11, 2026
Rating:
Tidak ada komentar: