diff --git a/proiect-nutritie-java/src/main/webapp/index.html b/proiect-nutritie-java/src/main/webapp/index.html
index be8fe96..6b69a4b 100644
--- a/proiect-nutritie-java/src/main/webapp/index.html
+++ b/proiect-nutritie-java/src/main/webapp/index.html
@@ -3,83 +3,153 @@
 <head>
     <meta charset="UTF-8">
     <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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <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; }
+        :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; }
     </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 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>
 
-        <div class="mb-3">
-            <label class="form-label">Înălțime (cm)</label>
-            <input type="number" id="inaltime" class="form-control" required>
+        <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>
+            <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 class="mb-3">
-            <label class="form-label">Vârstă</label>
-            <input type="number" id="varsta" class="form-control" required>
+        <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="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 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>
+            <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 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);
+    function calculate() {
+        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 activitate = parseFloat(document.getElementById('activitate').value);
+        const act = parseFloat(document.getElementById('activitate').value);
+        const obj = parseFloat(document.getElementById('obiectiv').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;
-        }
+        if(!g || !i || !v) return alert("Te rugăm să completezi toate datele!");
 
-        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;
-        document.getElementById('resultBox').style.display = 'block';
-    });
+        const total = Math.round((bmr * act) + obj);
+        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>
 
 </body>
