<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f1f5f9;
margin: 0;
padding: 0;
}
.container {
max-width: 520px;
margin: 40px auto;
background: #ffffff;
padding: 25px;
border-radius: 12px;
border: 2px solid #2563eb; /* solid professional color */
box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
h2 {
text-align: center;
color: #1e3a8a;
margin-bottom: 20px;
}
label {
font-weight: bold;
display: block;
margin-top: 12px;
color: #374151;
}
input, select, button {
width: 100%;
padding: 12px;
margin-top: 6px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-size: 16px;
}
button {
background: #2563eb;
color: white;
font-weight: bold;
cursor: pointer;
margin-top: 16px;
border: none;
transition: 0.3s;
}
button:hover {
background: #1e40af;
}
.result {
margin-top: 20px;
padding: 15px;
border-radius: 10px;
background: #e0f2fe;
font-size: 18px;
font-weight: bold;
text-align: center;
color: #0f172a;
border: 1px solid #38bdf8;
}
.tips {
margin-top: 15px;
padding: 15px;
border-radius: 10px;
background: #fef9c3;
border: 1px solid #ca8a04;
font-size: 15px;
color: #92400e;
}
.ad-box {
margin-top: 25px;
padding: 15px;
background: #fef9c3;
border: 2px dashed #ca8a04;
border-radius: 10px;
text-align: center;
font-weight: bold;
color: #92400e;
}
</style>
</head>
<body>
<div class="container">
<h2>BMI Calculator</h2>
<label for="sex">Sex</label>
<select id="sex">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<label for="height">Height (cm)</label>
<input type="number" id="height" placeholder="Enter height in cm">
<label for="weight">Weight (kg)</label>
<input type="number" id="weight" placeholder="Enter weight in kg">
<button onclick="calculateBMI()">Calculate BMI</button>
<div class="result" id="result">Result will appear here</div>
<div class="tips" id="tips"></div>
<!-- Ad Box -->
<div class="ad-box">
🔶 Your Ad Here 🔶 <br>
<!-- Paste JavaScript ad code below -->
<script>
// Example ad script (replace with your own)
// document.write("<a href='#'><img src='https://via.placeholder.com/300x250?text=Ad' /></a>");
</script>
</div>
</div>
<script>
function calculateBMI() {
let sex = document.getElementById("sex").value;
let height = document.getElementById("height").value;
let weight = document.getElementById("weight").value;
let resultBox = document.getElementById("result");
let tipsBox = document.getElementById("tips");
if (height > 0 && weight > 0) {
let heightM = height / 100; // convert cm to meters
let bmi = (weight / (heightM * heightM)).toFixed(2);
let status = "";
let tips = "";
if (bmi < 18.5) {
status = "Underweight";
tips = sex === "male"
? "Increase protein intake, strength training, and calorie-rich healthy foods."
: "Add iron-rich foods, dairy, and healthy fats. Consider light weight training.";
}
else if (bmi < 24.9) {
status = "Normal weight";
tips = sex === "male"
? "Maintain with balanced meals, regular workouts, and hydration."
: "Continue healthy eating, yoga/pilates, and avoid skipping meals.";
}
else if (bmi < 29.9) {
status = "Overweight";
tips = sex === "male"
? "Focus on cardio, reduce processed carbs, and monitor portions."
: "Increase vegetables, fiber intake, and try daily brisk walking.";
}
else {
status = "Obese";
tips = sex === "male"
? "Seek medical advice, start low-impact workouts, and cut sugary drinks."
: "Consult a nutritionist, focus on gradual weight loss, and add light exercise.";
}
resultBox.innerHTML = `Your BMI is <b>${bmi}</b> (${status})`;
tipsBox.innerHTML = `💡 Tips for ${sex.charAt(0).toUpperCase() + sex.slice(1)}s: ${tips}`;
} else {
resultBox.innerHTML = "⚠️ Please enter valid values";
tipsBox.innerHTML = "";
}
}
</script>
</body>
</html>