s
This commit is contained in:
Ionel Andrei Cataon
@@ -3,83 +3,153 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Calculator Kcal & AI Menu - Java Edition</title>
|
<title>Calculator caloric și meniuri generate de AI</title>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||||
<style>
|
<style>
|
||||||
body { background-color: #f8f9fa; padding: 20px; }
|
:root { --primary-color: #2ecc71; --secondary-color: #27ae60; --bg-color: #f4f7f6; }
|
||||||
.container { max-width: 600px; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
|
body { background-color: var(--bg-color); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; }
|
||||||
.result-box { display: none; margin-top: 20px; padding: 20px; background-color: #d1f2eb; border-radius: 8px; text-align: center; }
|
.main-card { background: white; border: none; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); padding: 40px; margin-top: 30px; }
|
||||||
|
.header-section { text-align: center; margin-bottom: 40px; }
|
||||||
|
.header-section i { color: var(--primary-color); font-size: 3rem; margin-bottom: 15px; }
|
||||||
|
.btn-success { background-color: var(--primary-color); border: none; padding: 12px; font-weight: 600; border-radius: 10px; transition: 0.3s; }
|
||||||
|
.btn-success:hover { background-color: var(--secondary-color); transform: translateY(-2px); }
|
||||||
|
.result-panel { display: none; background: #e8f8f1; border-left: 5px solid var(--primary-color); border-radius: 10px; padding: 20px; margin-top: 25px; }
|
||||||
|
.ai-section { margin-top: 50px; border-top: 2px solid #eee; pt-4; }
|
||||||
|
.chat-bubble { background: #f8f9fa; border-radius: 15px; padding: 15px; margin-bottom: 20px; border-left: 4px solid #007bff; }
|
||||||
|
.recipe-card { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 15px; margin-top: 10px; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container pb-5">
|
||||||
<h2 class="text-center mb-4">Calculator Kcal & AI Menu</h2>
|
<div class="main-card mx-auto" style="max-width: 800px;">
|
||||||
|
<div class="header-section">
|
||||||
<form id="calcForm">
|
<i class="fas fa-robot"></i>
|
||||||
<div class="mb-3">
|
<h2 class="fw-bold">Calculator caloric și meniuri generate de AI</h2>
|
||||||
<label class="form-label">Greutate actuală (kg)</label>
|
<p class="text-muted">Analiză personalizată pentru un stil de viață sănătos</p>
|
||||||
<input type="number" id="greutate" class="form-control" required>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="row g-4">
|
||||||
<label class="form-label">Înălțime (cm)</label>
|
<div class="col-md-6">
|
||||||
<input type="number" id="inaltime" class="form-control" required>
|
<label class="form-label fw-semibold">Greutate (kg)</label>
|
||||||
|
<input type="number" id="greutate" class="form-control form-control-lg" placeholder="ex: 85" required>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label class="form-label fw-semibold">Înălțime (cm)</label>
|
||||||
|
<input type="number" id="inaltime" class="form-control form-control-lg" placeholder="ex: 180" required>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<label class="form-label fw-semibold">Vârstă</label>
|
||||||
|
<input type="number" id="varsta" class="form-control form-control-lg" required>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<label class="form-label fw-semibold">Sex</label>
|
||||||
|
<select id="sex" class="form-select form-select-lg">
|
||||||
|
<option value="masculin">Masculin</option>
|
||||||
|
<option value="feminin">Feminin</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<label class="form-label fw-semibold">Obiectiv</label>
|
||||||
|
<select id="obiectiv" class="form-select form-select-lg">
|
||||||
|
<option value="0">Menținere</option>
|
||||||
|
<option value="-250">Slăbire ușoară (-250 kcal)</option>
|
||||||
|
<option value="-500">Slăbire standard (-500 kcal)</option>
|
||||||
|
<option value="250">Masă musculară (+250 kcal)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label fw-semibold">Nivel Activitate</label>
|
||||||
|
<select id="activitate" class="form-select form-select-lg">
|
||||||
|
<option value="1.2">Sedentar (puțină mișcare)</option>
|
||||||
|
<option value="1.375">Ușor activ (1-3 zile sport)</option>
|
||||||
|
<option value="1.55">Moderat activ (3-5 zile sport)</option>
|
||||||
|
<option value="1.725">Foarte activ (zilnic sport intens)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mb-3">
|
<button onclick="calculate()" class="btn btn-success w-100 mt-4 shadow-sm">
|
||||||
<label class="form-label">Vârstă</label>
|
<i class="fas fa-calculator me-2"></i>Calculează Planul
|
||||||
<input type="number" id="varsta" class="form-control" required>
|
</button>
|
||||||
|
|
||||||
|
<div id="resultPanel" class="result-panel mt-4">
|
||||||
|
<h5 class="mb-1 text-dark">Rezultatul tău personalizat:</h5>
|
||||||
|
<h2 class="fw-bold text-success mb-0"><span id="kcalTotal">0</span> kcal / zi</h2>
|
||||||
|
<p class="text-muted small mt-2">*Acest calcul include deficitul ales pentru obiectivul tău.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="ai-section mt-5">
|
||||||
<label class="form-label">Sex</label>
|
<h4 class="fw-bold mb-4"><i class="fas fa-comment-dots me-2 text-primary"></i>Consultant AI Nutriție</h4>
|
||||||
<select id="sex" class="form-select">
|
<div class="chat-bubble">
|
||||||
<option value="masculin">Masculin</option>
|
<strong>AI:</strong> Bună! Sunt asistentul tău. După ce calculezi caloriile, spune-mi ce preferințe alimentare ai (ex: "sunt vegetarian", "nu-mi place peștele") și îți generez un meniu complet.
|
||||||
<option value="feminin">Feminin</option>
|
</div>
|
||||||
</select>
|
<textarea id="aiInput" class="form-control" rows="3" placeholder="Scrie aici preferințele tale..."></textarea>
|
||||||
|
<button onclick="generateAIMenu()" class="btn btn-primary w-100 mt-3 shadow-sm" id="aiBtn">
|
||||||
|
<i class="fas fa-magic me-2"></i>Generează Meniu Avansat
|
||||||
|
</button>
|
||||||
|
<div id="aiResponse" class="mt-4"></div>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.getElementById('calcForm').addEventListener('submit', function(e) {
|
function calculate() {
|
||||||
e.preventDefault();
|
const g = parseFloat(document.getElementById('greutate').value);
|
||||||
|
const i = parseFloat(document.getElementById('inaltime').value);
|
||||||
const greutate = parseFloat(document.getElementById('greutate').value);
|
const v = parseFloat(document.getElementById('varsta').value);
|
||||||
const inaltime = parseFloat(document.getElementById('inaltime').value);
|
|
||||||
const varsta = parseFloat(document.getElementById('varsta').value);
|
|
||||||
const sex = document.getElementById('sex').value;
|
const sex = document.getElementById('sex').value;
|
||||||
const activitate = parseFloat(document.getElementById('activitate').value);
|
const act = parseFloat(document.getElementById('activitate').value);
|
||||||
|
const obj = parseFloat(document.getElementById('obiectiv').value);
|
||||||
|
|
||||||
let bmr;
|
if(!g || !i || !v) return alert("Te rugăm să completezi toate datele!");
|
||||||
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);
|
let bmr = (sex === 'masculin') ?
|
||||||
|
(10 * g) + (6.25 * i) - (5 * v) + 5 :
|
||||||
|
(10 * g) + (6.25 * i) - (5 * v) - 161;
|
||||||
|
|
||||||
document.getElementById('kcalResult').innerText = totalKcal;
|
const total = Math.round((bmr * act) + obj);
|
||||||
document.getElementById('resultBox').style.display = 'block';
|
document.getElementById('kcalTotal').innerText = total;
|
||||||
});
|
document.getElementById('resultPanel').style.display = 'block';
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateAIMenu() {
|
||||||
|
const kcal = document.getElementById('kcalTotal').innerText;
|
||||||
|
if(kcal === "0") return alert("Calculează mai întâi caloriile!");
|
||||||
|
|
||||||
|
const userPrefs = document.getElementById('aiInput').value;
|
||||||
|
const respDiv = document.getElementById('aiResponse');
|
||||||
|
|
||||||
|
respDiv.innerHTML = '<div class="text-center"><div class="spinner-border text-primary"></div><p>AI-ul analizează rețetele...</p></div>';
|
||||||
|
|
||||||
|
// Simulăm un AI avansat cu o logică de selecție rețete
|
||||||
|
setTimeout(() => {
|
||||||
|
const isVegi = userPrefs.toLowerCase().includes('vegetarian');
|
||||||
|
|
||||||
|
let meniu = `
|
||||||
|
<div class="chat-bubble" style="border-left-color: var(--primary-color)">
|
||||||
|
<strong>AI:</strong> Am generat un meniu de aproximativ ${kcal} kcal, bazat pe produse accesibile în orice supermarket:
|
||||||
|
</div>
|
||||||
|
<div class="recipe-card">
|
||||||
|
<h6 class="fw-bold text-primary"><i class="fas fa-coffee me-2"></i>Mic Dejun (aprox. ${Math.round(kcal*0.25)} kcal)</h6>
|
||||||
|
<p class="mb-0">${isVegi ? 'Omletă din 3 ouă cu 50g brânză telemea și roșii.' : 'Omletă cu șuncă de pui (50g) și 2 felii pâine integrală.'}<br>
|
||||||
|
<small class="text-muted">Greutate estimată: 250g | Calorii: ${Math.round(kcal*0.25)} kcal</small></p>
|
||||||
|
</div>
|
||||||
|
<div class="recipe-card">
|
||||||
|
<h6 class="fw-bold text-primary"><i class="fas fa-utensils me-2"></i>Prânz (aprox. ${Math.round(kcal*0.4)} kcal)</h6>
|
||||||
|
<p class="mb-0">${isVegi ? 'Mâncare de mazăre cu tofu afumat (150g) și salată verde.' : 'Piept de pui la grătar (200g) cu orez brun (150g gătite) și broccoli.'}<br>
|
||||||
|
<small class="text-muted">Greutate estimată: 400g | Calorii: ${Math.round(kcal*0.4)} kcal</small></p>
|
||||||
|
</div>
|
||||||
|
<div class="recipe-card">
|
||||||
|
<h6 class="fw-bold text-primary"><i class="fas fa-moon me-2"></i>Cină (aprox. ${Math.round(kcal*0.35)} kcal)</h6>
|
||||||
|
<p class="mb-0">${isVegi ? 'Salată Grecească mare (brânză feta, măsline, castraveți) cu o felie de pâine.' : 'Pește alb (Cod/Păstrăv) la cuptor cu cartofi natur (200g).'}<br>
|
||||||
|
<small class="text-muted">Greutate estimată: 350g | Calorii: ${Math.round(kcal*0.35)} kcal</small></p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
respDiv.innerHTML = meniu;
|
||||||
|
}, 1500);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user