From 4383ff369e88d7f139a914d5eb52af35b8318acc Mon Sep 17 00:00:00 2001
From: Ionel Andrei Cataon <ionelandreicataon@proton.com>
Date: Wed, 18 Feb 2026 15:59:34 +0200
Subject: [PATCH] s

---
 .../src/main/webapp/index.html                | 242 +++++++++---------
 1 file changed, 119 insertions(+), 123 deletions(-)
diff --git a/proiect-nutritie-java/src/main/webapp/index.html b/proiect-nutritie-java/src/main/webapp/index.html
index 6b69a4b..3bfce0f 100644
--- a/proiect-nutritie-java/src/main/webapp/index.html
+++ b/proiect-nutritie-java/src/main/webapp/index.html
@@ -3,152 +3,148 @@
 <head>
     <meta charset="UTF-8">
     <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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <style>
-        :root { --primary-color: #2ecc71; --secondary-color: #27ae60; --bg-color: #f4f7f6; }
-        body { background-color: var(--bg-color); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; }
-        .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; }
+        :root { --primary: #27ae60; --dark: #1a252f; --light: #f8f9fa; }
+        body { background-color: #e9ecef; font-family: 'Segoe UI', sans-serif; }
+        .sidebar { background: var(--dark); color: white; min-height: 100vh; padding: 30px; }
+        .main-card { background: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 30px; margin-top: 20px; }
+        .slider-label { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 10px; }
+        .day-pill { cursor: pointer; padding: 8px 15px; border-radius: 20px; background: #eee; margin: 3px; display: inline-block; transition: 0.2s; }
+        .day-pill.active { background: var(--primary); color: white; }
+        .meal-item { border-left: 5px solid var(--primary); background: var(--light); padding: 15px; border-radius: 10px; margin-bottom: 15px; }
+        .shopping-list { background: #fff3cd; border: 1px dashed #ffeeba; padding: 20px; border-radius: 10px; }
     </style>
 </head>
 <body>
 
-<div class="container pb-5">
-    <div class="main-card mx-auto" style="max-width: 800px;">
-        <div class="header-section">
-            <i class="fas fa-robot"></i>
-            <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="container-fluid">
+    <div class="row">
+        <div class="col-lg-3 sidebar">
+            <h4 class="mb-4 text-success"><i class="fas fa-microchip me-2"></i>NutriControl AI</h4>
+            
+            <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 class="row g-4">
-            <div class="col-md-6">
-                <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 class="col-lg-9 p-4">
+            <div id="welcomeScreen" class="text-center py-5">
+                <i class="fas fa-chart-line fa-4x text-muted mb-3"></i>
+                <h2>Configurează-ți planul în stânga</h2>
             </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">
-            <i class="fas fa-calculator me-2"></i>Calculează Planul
-        </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 class="ai-section mt-5">
-            <h4 class="fw-bold mb-4"><i class="fas fa-comment-dots me-2 text-primary"></i>Consultant AI Nutriție</h4>
-            <div class="chat-bubble">
-                <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.
+            <div id="dashboard" style="display: none;">
+                <div class="row">
+                    <div class="col-md-8">
+                        <div class="main-card">
+                            <div class="d-flex justify-content-between mb-4">
+                                <h3>Meniu Săptămânal</h3>
+                                <div id="daysRow"></div>
+                            </div>
+                            <div id="mealContainer"></div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="main-card shopping-list">
+                            <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>
-            <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>
 
 <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 i = parseFloat(document.getElementById('inaltime').value);
-        const v = parseFloat(document.getElementById('varsta').value);
-        const sex = document.getElementById('sex').value;
-        const act = parseFloat(document.getElementById('activitate').value);
-        const obj = parseFloat(document.getElementById('obiectiv').value);
+        const adjust = parseInt(document.getElementById('kcalAdjust').value);
+        
+        // Formula simplificată BMR
+        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!");
-
-        let bmr = (sex === 'masculin') ? 
-            (10 * g) + (6.25 * i) - (5 * v) + 5 : 
-            (10 * g) + (6.25 * i) - (5 * v) - 161;
-
-        const total = Math.round((bmr * act) + obj);
-        document.getElementById('kcalTotal').innerText = total;
-        document.getElementById('resultPanel').style.display = 'block';
+        document.getElementById('welcomeScreen').style.display = 'none';
+        document.getElementById('dashboard').style.display = 'block';
+        
+        renderDays();
+        showMeals(0, finalKcal);
+        generateGroceries();
     }
 
-    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>';
+    function renderDays() {
+        document.getElementById('daysRow').innerHTML = ["L", "M", "Mi", "J", "V", "S", "D"].map((d, i) => 
+            `<span class="day-pill ${i === currentDay ? 'active' : ''}" onclick="selectDay(${i})">${d}</span>`
+        ).join('');
+    }
 
-        // 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);
+    function selectDay(i) {
+        currentDay = i;
+        const adjust = parseInt(document.getElementById('kcalAdjust').value);
+        showMeals(i, baseKcal + adjust);
+        renderDays();
+    }
+
+    function showMeals(dayIdx, total) {
+        const meals = ["Mic Dejun (25%)", "Prânz (35%)", "Gustare (15%)", "Cină (25%)"];
+        const dayData = db[dayIdx % 3]; // Ciclam datele pentru demo
+        
+        let html = `<h5>Țintă zilnică: <strong>${total} kcal</strong></h5><hr>`;
+        meals.forEach((m, i) => {
+            const perc = i === 0 || i === 3 ? 0.25 : (i === 1 ? 0.35 : 0.15);
+            html += `
+                <div class="meal-item d-flex justify-content-between">
+                    <div><strong>${m}</strong><br>${dayData.m[i]}</div>
+                    <div class="text-success fw-bold">${Math.round(total * perc)} kcal</div>
+                </div>`;
+        });
+        document.getElementById('mealContainer').innerHTML = html;
+    }
+
+    function generateGroceries() {
+        const items = ["Pungi de Ovăz", "Piept de Pui (1.5kg)", "Orez Brun", "Bax de Iaurt", "Migdale & Nuci", "Legume Congelate", "Fructe de sezon"];
+        document.getElementById('groceryList').innerHTML = items.map(it => 
+            `<li class="mb-2"><i class="far fa-square me-2"></i>${it}</li>`
+        ).join('');
     }
 </script>
 
