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 16:48:38 +02:00
parent 9adc71a26e
commit e4a8e9c388
1 changed files with 85 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NutriAI Elite v12.0 - Precision Calibration</title>
<title>NutriAI Elite v13.0 - Hydration & Precision</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
@@ -21,47 +21,41 @@
body.theme-carbon { --bg: #171717; --sidebar-bg: #262626; --primary: #f5f5f5; --card-ai: #262626; }
body { background-color: var(--bg); color: #ffffff; font-family: 'Outfit', sans-serif; transition: 0.5s; overflow-x: hidden; }
.sidebar { background: var(--sidebar-bg); border-right: 1px solid rgba(255,255,255,0.1); min-height: 100vh; padding: 1.5rem; box-shadow: 10px 0 30px rgba(0,0,0,0.2); }
.sidebar { background: var(--sidebar-bg); border-right: 1px solid rgba(255,255,255,0.1); min-height: 100vh; padding: 1.2rem; box-shadow: 10px 0 30px rgba(0,0,0,0.2); }
.label-pro { color: var(--primary); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 5px; display: block; }
.glass-input { background: var(--input-bg) !important; color: var(--input-text) !important; border: 2px solid var(--primary) !important; border-radius: 8px; font-weight: 700 !important; }
.label-pro { color: var(--primary); font-weight: 800; font-size: 0.7rem; text-transform: uppercase; margin-bottom: 4px; display: block; }
.glass-input { background: var(--input-bg) !important; color: var(--input-text) !important; border: 2px solid var(--primary) !important; border-radius: 8px; font-weight: 700 !important; font-size: 0.9rem; }
.kcal-hub { background: linear-gradient(135deg, var(--primary) 0%, #1e40af 100%); border-radius: 15px; padding: 1.2rem; text-align: center; margin-top: 15px; }
.kcal-hub { background: linear-gradient(135deg, var(--primary) 0%, #1e40af 100%); border-radius: 15px; padding: 1rem; text-align: center; margin-top: 10px; }
.water-card { background: rgba(59, 130, 246, 0.1); border: 1px solid var(--primary); border-radius: 15px; padding: 12px; margin-top: 10px; }
.water-glass { cursor: pointer; font-size: 1.2rem; color: rgba(255,255,255,0.2); transition: 0.2s; }
.water-glass.active { color: #60a5fa; transform: scale(1.2); }
.macro-card { background: rgba(0,0,0,0.2); border-radius: 15px; padding: 15px; margin-top: 15px; border: 1px solid rgba(255,255,255,0.05); }
.chat-area { height: 50vh; overflow-y: auto; padding: 20px; border-radius: 20px; background: rgba(0,0,0,0.2); }
.msg { padding: 1.2rem; border-radius: 1rem; margin-bottom: 1rem; max-width: 95%; }
.ai { background: var(--card-ai); border-left: 5px solid var(--primary); }
.user { background: var(--primary); margin-left: auto; }
.chat-area { height: 50vh; overflow-y: auto; padding: 25px; border-radius: 20px; background: rgba(0,0,0,0.2); }
.msg { padding: 1.5rem; border-radius: 1.2rem; margin-bottom: 1.5rem; max-width: 95%; line-height: 1.6; }
.ai { background: var(--card-ai); border-left: 6px solid var(--primary); }
.user { background: var(--primary); margin-left: auto; font-weight: 600; }
table { width: 100%; margin: 15px 0; border-collapse: collapse; background: rgba(0,0,0,0.3); border-radius: 10px; overflow: hidden; }
th, td { padding: 12px; border: 1px solid rgba(255,255,255,0.1); }
th { background: var(--primary); color: #000; }
.input-bar { background: var(--sidebar-bg); border-radius: 50px; padding: 10px 25px; border: 2px solid var(--primary); }
.top-nav { position: fixed; top: 15px; right: 20px; z-index: 1000; display: flex; gap: 10px; }
.btn-shop { background: #f59e0b; color: #000; font-weight: 800; border: none; border-radius: 12px; padding: 10px 20px; transition: 0.3s; height: 55px; }
.btn-shop:hover { background: #fbbf24; transform: scale(1.05); }
.input-bar { background: var(--sidebar-bg); border-radius: 50px; padding: 8px 20px; border: 2px solid var(--primary); }
.btn-shop { background: #f59e0b; color: #000; font-weight: 800; border: none; border-radius: 12px; padding: 0 20px; height: 50px; }
</style>
</head>
<body class="theme-dark">
<div class="top-nav">
<div class="btn-group shadow-lg">
<div class="position-fixed top-0 end-0 p-3 d-flex gap-2" style="z-index: 1050;">
<div class="btn-group shadow">
<input type="radio" class="btn-check" name="units" id="metric" checked onchange="toggleUnits()">
<label class="btn btn-primary px-3" for="metric">Metric</label>
<label class="btn btn-primary btn-sm" for="metric">Metric</label>
<input type="radio" class="btn-check" name="units" id="imperial" onchange="toggleUnits()">
<label class="btn btn-primary px-3" for="imperial">Imperial</label>
<label class="btn btn-primary btn-sm" for="imperial">Imperial</label>
</div>
<div class="dropdown">
<button class="btn btn-light rounded-circle shadow" data-bs-toggle="dropdown" style="width: 45px; height: 45px;"><i class="fas fa-palette"></i></button>
<ul class="dropdown-menu dropdown-menu-end shadow-lg">
<button class="btn btn-light rounded-circle shadow" data-bs-toggle="dropdown"><i class="fas fa-palette"></i></button>
<ul class="dropdown-menu dropdown-menu-end shadow">
<li><a class="dropdown-item" href="#" onclick="setTheme('dark')">Onyx Dark</a></li>
<li><a class="dropdown-item" href="#" onclick="setTheme('emerald')">Emerald Forest</a></li>
<li><a class="dropdown-item" href="#" onclick="setTheme('midnight')">Midnight Indigo</a></li>
<li><a class="dropdown-item" href="#" onclick="setTheme('carbon')">Carbon White</a></li>
<li><a class="dropdown-item" href="#" onclick="setTheme('emerald')">Emerald</a></li>
<li><a class="dropdown-item" href="#" onclick="setTheme('midnight')">Midnight</a></li>
<li><a class="dropdown-item" href="#" onclick="setTheme('carbon')">Carbon</a></li>
</ul>
</div>
</div>
@@ -69,32 +63,37 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 sidebar">
<h4 class="fw-bold mb-3"><i class="fas fa-microchip text-primary me-2"></i>NutriAI Elite</h4>
<h5 class="fw-bold mb-3"><i class="fas fa-bolt text-primary me-2"></i>NutriAI ELITE</h5>
<div class="row g-2 mb-3">
<div class="col-6"><label class="label-pro" id="lblCurW">Weight (kg)</label><input type="number" id="weight" class="form-control glass-input" value="110" oninput="updateProfile()"></div>
<div class="row g-2 mb-2">
<div class="col-6"><label class="label-pro" id="lblCurW">Current (kg)</label><input type="number" id="weight" class="form-control glass-input" value="110" oninput="updateProfile()"></div>
<div class="col-6"><label class="label-pro" id="lblTarW">Target (kg)</label><input type="number" id="targetW" class="form-control glass-input" value="85" oninput="updateProfile()"></div>
<div class="col-6"><label class="label-pro" id="lblH">Height (cm)</label><input type="number" id="height" class="form-control glass-input" value="176" oninput="updateProfile()"></div>
<div class="col-6"><label class="label-pro">Age</label><input type="number" id="age" class="form-control glass-input" value="30" oninput="updateProfile()"></div>
<div class="col-12"><label class="label-pro">Activity</label>
<select id="activity" class="form-select glass-input" onchange="updateProfile()">
<option value="1.2">Sedentary</option><option value="1.375">Light</option><option value="1.55" selected>Moderate</option><option value="1.725">Active</option>
<option value="1.2">Sedentary</option><option value="1.55" selected>Moderate</option><option value="1.725">Active</option>
</select>
</div>
<div class="col-12">
<label class="label-pro d-flex justify-content-between">Aggressiveness <span><span id="aggValue">-300</span> kcal</span></label>
<label class="label-pro d-flex justify-content-between">Aggressiveness <span id="aggValue">-300 kcal</span></label>
<input type="range" id="aggSlider" class="form-range" min="-1000" max="1000" step="50" value="-300" oninput="updateProfile()">
</div>
</div>
<div class="kcal-hub shadow">
<small class="text-uppercase fw-bold opacity-75">Daily Target</small>
<h2 class="fw-bold mb-0" id="totalKcal">---</h2>
<span class="small">KCAL / DAY</span>
<div class="kcal-hub">
<small class="text-uppercase fw-bold opacity-75">Daily Goal</small>
<h2 class="fw-bold mb-0" id="totalKcal">2500</h2>
</div>
<div class="macro-card text-center">
<canvas id="macroChart" style="max-height: 120px;"></canvas>
<div class="water-card text-center">
<label class="label-pro mb-2"><i class="fas fa-tint me-1"></i> Hydration: <span id="waterTarget">3.5</span>L</label>
<div class="d-flex justify-content-between px-2" id="waterTracker">
</div>
</div>
<div class="macro-card">
<canvas id="macroChart" style="max-height: 100px;"></canvas>
<div class="d-flex justify-content-around mt-2 small fw-bold">
<span class="text-info">P: <span id="pGram">0</span>g</span>
<span class="text-danger">C: <span id="cGram">0</span>g</span>
@@ -104,21 +103,19 @@
</div>
<div class="col-lg-9 p-5">
<div id="chatBox" class="chat-area shadow-inner">
<div id="chatBox" class="chat-area shadow-sm">
<div class="msg ai">
<h5 class="fw-bold text-primary">System Recalibrated.</h5>
Precision math has been updated. I'm ready to build a meal plan based on your exact calorie target.
<h5 class="fw-bold text-primary">Hydration & Precision Sync.</h5>
I have calculated your water needs and macros based on your <strong><span id="tagWeight">110kg</span></strong> profile. Ready for your meal plan?
</div>
</div>
<div class="mt-4 d-flex gap-2 align-items-center">
<div class="input-bar d-flex align-items-center flex-grow-1 shadow">
<input type="text" id="userInput" class="form-control bg-transparent border-0 text-white" placeholder="Ask for a meal plan table...">
<button onclick="sendToGroq()" class="btn btn-primary rounded-circle p-2 ms-2" style="min-width: 45px; height: 45px;"><i class="fas fa-paper-plane"></i></button>
<div class="mt-4 d-flex gap-2">
<div class="input-bar d-flex align-items-center flex-grow-1">
<input type="text" id="userInput" class="form-control bg-transparent border-0 text-white" placeholder="Type a message...">
<button onclick="sendToGroq()" class="btn btn-primary rounded-circle p-2 ms-2" style="width: 40px; height: 40px;"><i class="fas fa-paper-plane"></i></button>
</div>
<button onclick="generateShoppingList()" class="btn-shop shadow">
<i class="fas fa-shopping-cart me-2"></i> SHOPPING LIST
</button>
<button onclick="generateShoppingList()" class="btn-shop"><i class="fas fa-shopping-cart me-1"></i> SHOPPING LIST</button>
</div>
</div>
</div>
@@ -127,8 +124,7 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
const GROQ_API_KEY = "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";
let isMetric = true;
let macroChart;
let isMetric = true, macroChart, waterG = 0;
function setTheme(t) { document.body.className = 'theme-' + t; }
document.getElementById('userInput').addEventListener('keypress', (e) => { if(e.key === 'Enter') sendToGroq(); });
@@ -136,70 +132,68 @@
function initChart() {
const ctx = document.getElementById('macroChart').getContext('2d');
macroChart = new Chart(ctx, {
type: 'doughnut',
data: { labels: ['Protein', 'Carbs', 'Fats'], datasets: [{ data: [1, 1, 1], backgroundColor: ['#0dcaf0', '#dc3545', '#ffc107'], borderWeight: 0 }] },
options: { plugins: { legend: { display: false } }, cutout: '70%' }
type: 'doughnut', data: { datasets: [{ data: [1,1,1], backgroundColor: ['#0dcaf0', '#dc3545', '#ffc107'], borderWeight: 0 }] },
options: { plugins: { legend: { display: false } }, cutout: '75%' }
});
renderWater(8);
}
function renderWater(total) {
const container = document.getElementById('waterTracker');
container.innerHTML = '';
for(let i=0; i<total; i++) {
container.innerHTML += `<i class="fas fa-glass-water water-glass" onclick="toggleWater(${i}, this)"></i>`;
}
}
function toggleWater(idx, el) { el.classList.toggle('active'); }
function toggleUnits() {
isMetric = document.getElementById('metric').checked;
const w = document.getElementById('weight'), tw = document.getElementById('targetW'), h = document.getElementById('height');
if (isMetric) { w.value = Math.round(w.value / 2.205); tw.value = Math.round(tw.value / 2.205); h.value = Math.round(h.value * 2.54);
} else { w.value = Math.round(w.value * 2.205); tw.value = Math.round(tw.value * 2.205); h.value = Math.round(h.value / 2.54); }
document.getElementById('lblCurW').innerText = isMetric ? "Weight (kg)" : "Weight (lb)";
document.getElementById('lblH').innerText = isMetric ? "Height (cm)" : "Height (in)";
const w = document.getElementById('weight'), h = document.getElementById('height');
if (isMetric) { w.value = Math.round(w.value / 2.205); h.value = Math.round(h.value * 2.54);
} else { w.value = Math.round(w.value * 2.205); h.value = Math.round(h.value / 2.54); }
document.getElementById('lblCurW').innerText = isMetric ? "Current (kg)" : "Current (lb)";
updateProfile();
}
function updateProfile() {
let w = parseFloat(document.getElementById('weight').value) || 0, h = parseFloat(document.getElementById('height').value) || 0;
let a = parseFloat(document.getElementById('age').value) || 0, act = parseFloat(document.getElementById('activity').value), agg = parseInt(document.getElementById('aggSlider').value);
let w_c = isMetric ? w : w / 2.205, h_c = isMetric ? h : h * 2.54;
// CORRECTION: Precision Mifflin-St Jeor Calculation
let bmr = (10 * w_c) + (6.25 * h_c) - (5 * a) + 5;
let maintenance = bmr * act;
let total = Math.round(maintenance + agg);
let totalKcal = Math.round((bmr * act) + agg);
document.getElementById('totalKcal').innerText = total;
document.getElementById('totalKcal').innerText = totalKcal;
document.getElementById('aggValue').innerText = (agg > 0 ? '+' : '') + agg + " kcal";
document.getElementById('tagWeight').innerText = w + (isMetric ? 'kg' : 'lb');
// Logic for Macros
let pPct = agg < 0 ? 0.35 : 0.25, cPct = agg < 0 ? 0.35 : 0.50, fPct = 1 - (pPct + cPct);
let pG = Math.round((total * pPct) / 4), cG = Math.round((total * cPct) / 4), fG = Math.round((total * fPct) / 9);
// Precision Water Math: ~35ml per kg
let waterL = (w_c * 0.035).toFixed(1);
document.getElementById('waterTarget').innerText = waterL;
let pG = Math.round((totalKcal * 0.3) / 4), cG = Math.round((totalKcal * 0.4) / 4), fG = Math.round((totalKcal * 0.3) / 9);
document.getElementById('pGram').innerText = pG; document.getElementById('cGram').innerText = cG; document.getElementById('fGram').innerText = fG;
if(macroChart) { macroChart.data.datasets[0].data = [pG*4, cG*4, fG*9]; macroChart.update(); }
}
async function sendToGroq(customPrompt = null) {
const input = document.getElementById('userInput'), text = customPrompt || input.value.trim();
async function sendToGroq(custom) {
const input = document.getElementById('userInput'), text = custom || input.value.trim();
if(!text) return;
if(!customPrompt) addMsg('user', text);
if(!customPrompt) input.value = "";
const id = 'l-' + Date.now(); addMsg('ai', '<span class="spinner-border spinner-border-sm"></span> Calibrating Strategy...', id);
if(!custom) addMsg('user', text); input.value = "";
const id = 'l-' + Date.now(); addMsg('ai', 'Thinking...', id);
try {
const resp = await fetch("https://api.groq.com/openai/v1/chat/completions", {
method: "POST", headers: { "Authorization": `Bearer ${GROQ_API_KEY}`, "Content-Type": "application/json" },
body: JSON.stringify({ model: "llama-3.3-70b-versatile", messages: [{ role: "system", content: `Expert Nutritionist. Goal: ${document.getElementById('totalKcal').innerText} kcal. Macros: P:${document.getElementById('pGram').innerText}g, C:${document.getElementById('cGram').innerText}g, F:${document.getElementById('fGram').innerText}g. Use Markdown Tables.` }, { role: "user", content: text }] })
body: JSON.stringify({ model: "llama-3.3-70b-versatile", messages: [{ role: "system", content: `Nutritionist. Daily: ${document.getElementById('totalKcal').innerText} kcal. P:${document.getElementById('pGram').innerText}g. Water: ${document.getElementById('waterTarget').innerText}L. Use tables.` }, { role: "user", content: text }] })
});
const d = await resp.json();
document.getElementById(id).innerHTML = marked.parse(d.choices[0].message.content);
} catch(e) { document.getElementById(id).innerText = "Error connecting to AI."; }
}
function generateShoppingList() {
sendToGroq("Generate a weekly shopping list categorized by aisle based on the meal plan we discussed.");
}
function addMsg(t, c, i = null) {
const b = document.getElementById('chatBox');
b.innerHTML += `<div class="msg ${t} shadow-sm" ${i ? `id="${i}"` : ''}>${c}</div>`;
b.scrollTop = b.scrollHeight;
}
function generateShoppingList() { sendToGroq("Generate a weekly shopping list for this plan."); }
function addMsg(t, c, i = null) { const b = document.getElementById('chatBox'); b.innerHTML += `<div class="msg ${t}" ${i ? `id="${i}"` : ''}>${c}</div>`; b.scrollTop = b.scrollHeight; }
initChart(); updateProfile();
</script>