ionelcataon/it_school
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

s

Browse Source
This commit is contained in:
Ionel Andrei Cataon
2026-02-18 15:59:34 +02:00
parent b39feeb283
commit 4383ff369e
1 changed files with 119 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
proiect-nutritie-java/src/main/webapp/index.html
View File

@@ -3,152 +3,148 @@
<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 caloric și meniuri generate de AI</title> <title>Sistem Expert Nutriție & Antrenament 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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style> <style>
:root { --primary-color: #2ecc71; --secondary-color: #27ae60; --bg-color: #f4f7f6; } :root { --primary: #27ae60; --dark: #1a252f; --light: #f8f9fa; }
body { background-color: var(--bg-color); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; } body { background-color: #e9ecef; font-family: 'Segoe UI', sans-serif; }
.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; } .sidebar { background: var(--dark); color: white; min-height: 100vh; padding: 30px; }
.header-section { text-align: center; margin-bottom: 40px; } .main-card { background: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 30px; margin-top: 20px; }
.header-section i { color: var(--primary-color); font-size: 3rem; margin-bottom: 15px; } .slider-label { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 10px; }
.btn-success { background-color: var(--primary-color); border: none; padding: 12px; font-weight: 600; border-radius: 10px; transition: 0.3s; } .day-pill { cursor: pointer; padding: 8px 15px; border-radius: 20px; background: #eee; margin: 3px; display: inline-block; transition: 0.2s; }
.btn-success:hover { background-color: var(--secondary-color); transform: translateY(-2px); } .day-pill.active { background: var(--primary); color: white; }
.result-panel { display: none; background: #e8f8f1; border-left: 5px solid var(--primary-color); border-radius: 10px; padding: 20px; margin-top: 25px; } .meal-item { border-left: 5px solid var(--primary); background: var(--light); padding: 15px; border-radius: 10px; margin-bottom: 15px; }
.ai-section { margin-top: 50px; border-top: 2px solid #eee; pt-4; } .shopping-list { background: #fff3cd; border: 1px dashed #ffeeba; padding: 20px; border-radius: 10px; }
.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 pb-5"> <div class="container-fluid">
<div class="main-card mx-auto" style="max-width: 800px;"> <div class="row">
<div class="header-section"> <div class="col-lg-3 sidebar">
<i class="fas fa-robot"></i> <h4 class="mb-4 text-success"><i class="fas fa-microchip me-2"></i>NutriControl AI</h4>
<h2 class="fw-bold">Calculator caloric și meniuri generate de AI</h2>
<p class="text-muted">Analiză personalizată pentru un stil de viață sănătos</p> <div class="mb-3">
<label class="form-label">Greutate (kg)</label>
<input type="number" id="greutate" class="form-control bg-dark text-white border-0" value="80">
</div>
<div class="mb-3">
<label class="form-label">Înălțime (cm)</label>
<input type="number" id="inaltime" class="form-control bg-dark text-white border-0" value="180">
</div>
<hr class="my-4">
<div class="mb-4">
<div class="slider-label">
<span>Deficit/Surplus</span>
<span id="sliderVal" class="text-success">0 kcal</span>
</div>
<input type="range" class="form-range" id="kcalAdjust" min="-1000" max="1000" step="50" value="0"
oninput="document.getElementById('sliderVal').innerText = this.value + ' kcal'">
<div class="d-flex justify-content-between small opacity-50">
<span>Slăbire</span>
<span>Menținere</span>
<span>Masă</span>
</div>
</div>
<button onclick="updateAI()" class="btn btn-success w-100 fw-bold p-3">ACTUALIZEAZĂ PLANUL</button>
</div> </div>
<div class="row g-4"> <div class="col-lg-9 p-4">
<div class="col-md-6"> <div id="welcomeScreen" class="text-center py-5">
<label class="form-label fw-semibold">Greutate (kg)</label> <i class="fas fa-chart-line fa-4x text-muted mb-3"></i>
<input type="number" id="greutate" class="form-control form-control-lg" placeholder="ex: 85" required> <h2>Configurează-ți planul în stânga</h2>
</div> </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>
<button onclick="calculate()" class="btn btn-success w-100 mt-4 shadow-sm"> <div id="dashboard" style="display: none;">
<i class="fas fa-calculator me-2"></i>Calculează Planul <div class="row">
</button> <div class="col-md-8">
<div class="main-card">
<div id="resultPanel" class="result-panel mt-4"> <div class="d-flex justify-content-between mb-4">
<h5 class="mb-1 text-dark">Rezultatul tău personalizat:</h5> <h3>Meniu Săptămânal</h3>
<h2 class="fw-bold text-success mb-0"><span id="kcalTotal">0</span> kcal / zi</h2> <div id="daysRow"></div>
<p class="text-muted small mt-2">*Acest calcul include deficitul ales pentru obiectivul tău.</p> </div>
</div> <div id="mealContainer"></div>
</div>
<div class="ai-section mt-5"> </div>
<h4 class="fw-bold mb-4"><i class="fas fa-comment-dots me-2 text-primary"></i>Consultant AI Nutriție</h4> <div class="col-md-4">
<div class="chat-bubble"> <div class="main-card shopping-list">
<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. <h5 class="fw-bold"><i class="fas fa-shopping-basket me-2"></i>Listă Cumpărături</h5>
<ul id="groceryList" class="list-unstyled mt-3"></ul>
</div>
<div id="trainingSection" class="mt-3"></div>
</div>
</div>
</div> </div>
<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> </div>
</div> </div>
<script> <script>
function calculate() { const db = [
{ d: "Luni", m: ["Ovăz cu afine", "Pui cu orez și broccoli", "Iaurt cu nuci", "Salată cu ton"] },
{ d: "Marți", m: ["Omletă cu spanac", "Paste integrale cu pesto", "Măr cu migdale", "Curcan la grătar"] },
{ d: "Miercuri", m: ["Smoothie proteic", "Vită cu fasole verde", "Brânză cottage", "Pește cu lămâie"] },
// ... restul zilelor se repeta logic
];
let currentDay = 0;
let baseKcal = 0;
function updateAI() {
const g = parseFloat(document.getElementById('greutate').value); const g = parseFloat(document.getElementById('greutate').value);
const i = parseFloat(document.getElementById('inaltime').value); const i = parseFloat(document.getElementById('inaltime').value);
const v = parseFloat(document.getElementById('varsta').value); const adjust = parseInt(document.getElementById('kcalAdjust').value);
const sex = document.getElementById('sex').value;
const act = parseFloat(document.getElementById('activitate').value); // Formula simplificată BMR
const obj = parseFloat(document.getElementById('obiectiv').value); baseKcal = Math.round(((10 * g) + (6.25 * i) - (5 * 30) + 5) * 1.4);
const finalKcal = baseKcal + adjust;
if(!g || !i || !v) return alert("Te rugăm să completezi toate datele!"); document.getElementById('welcomeScreen').style.display = 'none';
document.getElementById('dashboard').style.display = 'block';
let bmr = (sex === 'masculin') ?
(10 * g) + (6.25 * i) - (5 * v) + 5 : renderDays();
(10 * g) + (6.25 * i) - (5 * v) - 161; showMeals(0, finalKcal);
generateGroceries();
const total = Math.round((bmr * act) + obj);
document.getElementById('kcalTotal').innerText = total;
document.getElementById('resultPanel').style.display = 'block';
} }
function generateAIMenu() { function renderDays() {
const kcal = document.getElementById('kcalTotal').innerText; document.getElementById('daysRow').innerHTML = ["L", "M", "Mi", "J", "V", "S", "D"].map((d, i) =>
if(kcal === "0") return alert("Calculează mai întâi caloriile!"); `<span class="day-pill ${i === currentDay ? 'active' : ''}" onclick="selectDay(${i})">${d}</span>`
).join('');
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 function selectDay(i) {
setTimeout(() => { currentDay = i;
const isVegi = userPrefs.toLowerCase().includes('vegetarian'); const adjust = parseInt(document.getElementById('kcalAdjust').value);
showMeals(i, baseKcal + adjust);
let meniu = ` renderDays();
<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> function showMeals(dayIdx, total) {
<div class="recipe-card"> const meals = ["Mic Dejun (25%)", "Prânz (35%)", "Gustare (15%)", "Cină (25%)"];
<h6 class="fw-bold text-primary"><i class="fas fa-coffee me-2"></i>Mic Dejun (aprox. ${Math.round(kcal*0.25)} kcal)</h6> const dayData = db[dayIdx % 3]; // Ciclam datele pentru demo
<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> let html = `<h5>Țintă zilnică: <strong>${total} kcal</strong></h5><hr>`;
</div> meals.forEach((m, i) => {
<div class="recipe-card"> const perc = i === 0 || i === 3 ? 0.25 : (i === 1 ? 0.35 : 0.15);
<h6 class="fw-bold text-primary"><i class="fas fa-utensils me-2"></i>Prânz (aprox. ${Math.round(kcal*0.4)} kcal)</h6> html += `
<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> <div class="meal-item d-flex justify-content-between">
<small class="text-muted">Greutate estimată: 400g | Calorii: ${Math.round(kcal*0.4)} kcal</small></p> <div><strong>${m}</strong><br>${dayData.m[i]}</div>
</div> <div class="text-success fw-bold">${Math.round(total * perc)} kcal</div>
<div class="recipe-card"> </div>`;
<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> document.getElementById('mealContainer').innerHTML = html;
<small class="text-muted">Greutate estimată: 350g | Calorii: ${Math.round(kcal*0.35)} kcal</small></p> }
</div>
`; function generateGroceries() {
respDiv.innerHTML = meniu; const items = ["Pungi de Ovăz", "Piept de Pui (1.5kg)", "Orez Brun", "Bax de Iaurt", "Migdale & Nuci", "Legume Congelate", "Fructe de sezon"];
}, 1500); document.getElementById('groceryList').innerHTML = items.map(it =>
`<li class="mb-2"><i class="far fa-square me-2"></i>${it}</li>`
).join('');
} }
</script> </script>