86 lines
3.2 KiB
HTML
86 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ro">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Calculator Kcal & AI Menu - Java Edition</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
body { background-color: #f8f9fa; padding: 20px; }
|
|
.container { max-width: 600px; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
|
|
.result-box { display: none; margin-top: 20px; padding: 20px; background-color: #d1f2eb; border-radius: 8px; text-align: center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<h2 class="text-center mb-4">Calculator Kcal & AI Menu</h2>
|
|
|
|
<form id="calcForm">
|
|
<div class="mb-3">
|
|
<label class="form-label">Greutate actuală (kg)</label>
|
|
<input type="number" id="greutate" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Înălțime (cm)</label>
|
|
<input type="number" id="inaltime" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Vârstă</label>
|
|
<input type="number" id="varsta" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Sex</label>
|
|
<select id="sex" class="form-select">
|
|
<option value="masculin">Masculin</option>
|
|
<option value="feminin">Feminin</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Nivel activitate</label>
|
|
<select id="activitate" class="form-select">
|
|
<option value="1.2">Sedentar (birou)</option>
|
|
<option value="1.375">Activitate ușoară</option>
|
|
<option value="1.55">Moderat activ</option>
|
|
<option value="1.725">Foarte activ</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-success w-100">Calculează</button>
|
|
</form>
|
|
|
|
<div id="resultBox" class="result-box">
|
|
<h4>Ținta ta: <span id="kcalResult">0</span> kcal / zi</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('calcForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const greutate = parseFloat(document.getElementById('greutate').value);
|
|
const inaltime = parseFloat(document.getElementById('inaltime').value);
|
|
const varsta = parseFloat(document.getElementById('varsta').value);
|
|
const sex = document.getElementById('sex').value;
|
|
const activitate = parseFloat(document.getElementById('activitate').value);
|
|
|
|
let bmr;
|
|
if (sex === 'masculin') {
|
|
bmr = (10 * greutate) + (6.25 * inaltime) - (5 * varsta) + 5;
|
|
} else {
|
|
bmr = (10 * greutate) + (6.25 * inaltime) - (5 * varsta) - 161;
|
|
}
|
|
|
|
const totalKcal = Math.round(bmr * activitate);
|
|
|
|
document.getElementById('kcalResult').innerText = totalKcal;
|
|
document.getElementById('resultBox').style.display = 'block';
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |