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:54:35 +02:00
parent e30325ab5f
commit e192987648
1 changed files with 64 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,62 +3,63 @@
<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>NutriAI Elite v14.0</title> <title>NutriAI Elite v15.0</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.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"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" 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: #3b82f6; --bg: #020617; --card: #1e293b; --accent: #60a5fa; } :root { --primary: #3b82f6; --bg: #020617; --sidebar: #0f172a; --card: #1e293b; --accent: #60a5fa; }
body { background-color: var(--bg); color: #fff; font-family: 'Outfit', sans-serif; height: 100vh; overflow: hidden; }
/* Theme Variants */
body.theme-dark { --bg: #020617; --sidebar: #0f172a; --primary: #3b82f6; }
body.theme-emerald { --bg: #064e3b; --sidebar: #065f46; --primary: #10b981; }
body.theme-midnight { --bg: #1e1b4b; --sidebar: #312e81; --primary: #818cf8; }
body.theme-carbon { --bg: #171717; --sidebar: #262626; --primary: #f5f5f5; --accent: #a3a3a3; }
body { background-color: var(--bg); color: #fff; font-family: 'Outfit', sans-serif; height: 100vh; overflow: hidden; transition: 0.3s; }
.sidebar { background: var(--sidebar); border-right: 1px solid rgba(255,255,255,0.1); height: 100vh; overflow-y: auto; padding: 1.5rem; }
.sidebar { background: #0f172a; border-right: 1px solid rgba(255,255,255,0.1); height: 100vh; overflow-y: auto; padding: 1.5rem; }
.label-pro { color: var(--accent); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 5px; display: block; } .label-pro { color: var(--accent); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 5px; display: block; }
.glass-input { background: #fff !important; color: #000 !important; border: 3px solid var(--primary) !important; border-radius: 12px; font-weight: 800 !important; font-size: 1.1rem; }
.glass-input {
background: #fff !important; color: #000 !important;
border: 3px solid var(--primary) !important; border-radius: 12px;
font-weight: 800 !important; font-size: 1.1rem; padding: 10px;
}
.stat-panel { .stat-panel { background: linear-gradient(145deg, var(--primary), #1e3a8a); border-radius: 20px; padding: 1.5rem; margin: 15px 0; box-shadow: 0 8px 16px rgba(0,0,0,0.4); }
background: linear-gradient(145deg, #1e40af, #3b82f6); .water-hub { background: rgba(59, 130, 246, 0.1); border: 2px solid var(--primary); border-radius: 20px; padding: 15px; margin: 15px 0; text-align: center; }
border-radius: 20px; padding: 1.5rem; margin: 15px 0; box-shadow: 0 10px 20px rgba(0,0,0,0.3); .macro-hub { background: rgba(255,255,255,0.05); border-radius: 20px; padding: 20px; margin-top: 15px; }
}
/* Enhanced Hydration UI */ .chat-container { height: calc(100vh - 110px); overflow-y: auto; padding: 2rem; }
.water-hub { .msg { padding: 1.5rem; border-radius: 1.5rem; margin-bottom: 1.2rem; font-size: 1.1rem; max-width: 85%; }
background: rgba(59, 130, 246, 0.15); border: 2px solid var(--primary); .ai { background: var(--card); border-left: 8px solid var(--primary); }
border-radius: 20px; padding: 20px; margin: 15px 0; text-align: center; .user { background: var(--primary); margin-left: auto; color: #fff; }
}
.water-icon { font-size: 2.2rem; color: #60a5fa; margin-bottom: 5px; }
/* Bigger Macro UI */ .top-ctrl { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 100; display: flex; gap: 10px; }
.macro-hub { background: #1e293b; border-radius: 20px; padding: 25px; margin-top: 15px; } .btn-shop { background: #f59e0b; color: #000; font-weight: 800; border: none; border-radius: 15px; padding: 0 20px; height: 55px; }
.macro-label { font-size: 1.1rem; font-weight: 700; }
.chat-container { height: calc(100vh - 120px); overflow-y: auto; padding: 2rem; }
.msg { padding: 1.5rem; border-radius: 1.5rem; margin-bottom: 1.5rem; font-size: 1.1rem; line-height: 1.6; }
.ai { background: #1e293b; border-left: 8px solid var(--primary); }
.user { background: var(--primary); margin-left: auto; width: fit-content; max-width: 80%; }
.btn-shop { background: #f59e0b; color: #000; font-weight: 800; border: none; border-radius: 15px; padding: 0 25px; height: 60px; font-size: 1rem; }
</style> </style>
</head> </head>
<body> <body class="theme-dark">
<div class="top-ctrl">
<div class="btn-group shadow">
<button id="btnMetric" class="btn btn-primary btn-sm active" onclick="setUnits('metric')">METRIC</button>
<button id="btnImperial" class="btn btn-outline-primary btn-sm" onclick="setUnits('imperial')">IMP</button>
</div>
<div class="dropdown">
<button class="btn btn-light rounded-pill px-3 shadow-sm" data-bs-toggle="dropdown"><i class="fas fa-palette me-2"></i>THEME</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</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>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-lg-4 col-xl-3 sidebar"> <div class="col-lg-4 col-xl-3 sidebar">
<div class="d-flex justify-content-between align-items-center mb-4"> <h3 class="fw-extrabold mb-4"><i class="fas fa-bolt text-primary"></i> NUTRI ELITE</h3>
<h3 class="fw-extrabold m-0"><i class="fas fa-brain text-primary"></i> NUTRI ELITE</h3>
<div class="btn-group">
<button id="btnMetric" class="btn btn-primary active" onclick="setUnits('metric')">METRIC</button>
<button id="btnImperial" class="btn btn-outline-primary" onclick="setUnits('imperial')">IMP</button>
</div>
</div>
<div class="row g-3"> <div class="row g-3">
<div class="col-6"><label class="label-pro" id="txtW">Current (kg)</label><input type="number" id="w" class="form-control glass-input" value="110" oninput="update()"></div> <div class="col-6"><label class="label-pro" id="txtW">Current (kg)</label><input type="number" id="w" class="form-control glass-input" value="110" oninput="update()"></div>
<div class="col-6"><label class="label-pro" id="txtT">Target (kg)</label><input type="number" id="t" class="form-control glass-input" value="85" oninput="update()"></div> <div class="col-6"><label class="label-pro" id="txtT">Target (kg)</label><input type="number" id="t" class="form-control glass-input" value="85" oninput="update()"></div>
@@ -71,10 +72,9 @@
<option value="1.375">Lightly Active (1-2 days/week)</option> <option value="1.375">Lightly Active (1-2 days/week)</option>
<option value="1.55" selected>Moderately Active (3-5 days/week)</option> <option value="1.55" selected>Moderately Active (3-5 days/week)</option>
<option value="1.725">Very Active (6-7 days/week)</option> <option value="1.725">Very Active (6-7 days/week)</option>
<option value="1.9">Extra Active (Pro Athlete/Physical Labor)</option> <option value="1.9">Extra Active (Athlete/Physical Labor)</option>
</select> </select>
</div> </div>
<div class="col-12"> <div class="col-12">
<label class="label-pro d-flex justify-content-between">Calorie Adjustment <span id="aggDisp">-300 kcal</span></label> <label class="label-pro d-flex justify-content-between">Calorie Adjustment <span id="aggDisp">-300 kcal</span></label>
<input type="range" id="agg" class="form-range" min="-1000" max="1000" step="50" value="-300" oninput="update()"> <input type="range" id="agg" class="form-range" min="-1000" max="1000" step="50" value="-300" oninput="update()">
@@ -83,36 +83,35 @@
<div class="stat-panel text-center"> <div class="stat-panel text-center">
<h1 class="fw-bold mb-0" id="kcal">2500</h1> <h1 class="fw-bold mb-0" id="kcal">2500</h1>
<p class="text-uppercase fw-bold m-0 opacity-75">Daily Calorie Target</p> <p class="text-uppercase fw-bold m-0 opacity-75 small">Daily Calorie Target</p>
</div> </div>
<div class="water-hub"> <div class="water-hub">
<i class="fas fa-droplet water-icon"></i> <h2 class="fw-bold text-info mb-0" id="h2o">3.9L</h2>
<h2 class="fw-bold mb-0" id="h2o">3.9L</h2> <span class="label-pro"><i class="fas fa-droplet me-1"></i> Daily Hydration</span>
<span class="label-pro">Recommended Hydration</span>
</div> </div>
<div class="macro-hub"> <div class="macro-hub">
<canvas id="mChart" style="max-height: 180px;"></canvas> <canvas id="mChart" style="max-height: 160px;"></canvas>
<div class="row mt-4 text-center"> <div class="row mt-3 text-center fw-bold">
<div class="col-4"><div class="text-info macro-label">P</div><div id="pG">0g</div></div> <div class="col-4"><div class="text-info">P</div><div id="pG">0g</div></div>
<div class="col-4"><div class="text-danger macro-label">C</div><div id="cG">0g</div></div> <div class="col-4"><div class="text-danger">C</div><div id="cG">0g</div></div>
<div class="col-4"><div class="text-warning macro-label">F</div><div id="fG">0g</div></div> <div class="col-4"><div class="text-warning">F</div><div id="fG">0g</div></div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-8 col-xl-9 p-0"> <div class="col-lg-8 col-xl-9 p-0 bg-opacity-10 bg-black">
<div id="chat" class="chat-container"> <div id="chat" class="chat-container">
<div class="msg ai shadow-lg"> <div class="msg ai shadow">
<h4 class="fw-bold">Precision Engine Online.</h4> <h4 class="fw-bold text-primary">System Unified.</h4>
I have corrected the unit synchronization. Weight, Target, and Height will now switch globally between Metric and Imperial. Themes are back, units are synced, and your macros are front-and-center.
</div> </div>
</div> </div>
<div class="p-4 bg-dark border-top border-secondary d-flex gap-3"> <div class="p-3 border-top border-secondary d-flex gap-2">
<div class="input-group input-group-lg flex-grow-1"> <div class="input-group input-group-lg flex-grow-1">
<input type="text" id="uIn" class="form-control bg-dark text-white border-primary" placeholder="Enter request (e.g. Generate 7-day meal plan)..."> <input type="text" id="uIn" class="form-control bg-dark text-white border-primary" placeholder="Ask for a meal plan...">
<button class="btn btn-primary px-4" onclick="talk()"><i class="fas fa-paper-plane"></i></button> <button class="btn btn-primary px-4" onclick="talk()"><i class="fas fa-paper-plane"></i></button>
</div> </div>
<button class="btn-shop shadow" onclick="talk('Generate shopping list for current plan')"> <button class="btn-shop shadow" onclick="talk('Generate shopping list for current plan')">
@@ -123,10 +122,13 @@
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script> <script>
let isMetric = true, mChart; let isMetric = true, mChart;
const API = "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"; const API = "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";
function setTheme(t) { document.body.className = 'theme-' + t; }
function setUnits(mode) { function setUnits(mode) {
if((mode==='metric' && !isMetric) || (mode==='imperial' && isMetric)) { if((mode==='metric' && !isMetric) || (mode==='imperial' && isMetric)) {
isMetric = !isMetric; isMetric = !isMetric;
@@ -139,8 +141,8 @@
document.getElementById('txtW').innerText = isMetric ? "Current (kg)" : "Current (lb)"; document.getElementById('txtW').innerText = isMetric ? "Current (kg)" : "Current (lb)";
document.getElementById('txtT').innerText = isMetric ? "Target (kg)" : "Target (lb)"; document.getElementById('txtT').innerText = isMetric ? "Target (kg)" : "Target (lb)";
document.getElementById('txtH').innerText = isMetric ? "Height (cm)" : "Height (in)"; document.getElementById('txtH').innerText = isMetric ? "Height (cm)" : "Height (in)";
document.getElementById('btnMetric').className = isMetric ? "btn btn-primary active" : "btn btn-outline-primary"; document.getElementById('btnMetric').className = isMetric ? "btn btn-primary active btn-sm" : "btn btn-outline-primary btn-sm";
document.getElementById('btnImperial').className = !isMetric ? "btn btn-primary active" : "btn btn-outline-primary"; document.getElementById('btnImperial').className = !isMetric ? "btn btn-primary active btn-sm" : "btn btn-outline-primary btn-sm";
update(); update();
} }
} }
@@ -158,7 +160,7 @@
document.getElementById('aggDisp').innerText = (agg>0?'+':'')+agg+" kcal"; document.getElementById('aggDisp').innerText = (agg>0?'+':'')+agg+" kcal";
document.getElementById('h2o').innerText = (wc * 0.035).toFixed(1) + "L"; document.getElementById('h2o').innerText = (wc * 0.035).toFixed(1) + "L";
const pG = Math.round((total * (agg<0?0.35:0.25))/4), cG = Math.round((total * (agg<0?0.35:0.5))/4), fG = Math.round((total * 0.3)/9); const pG = Math.round((total * 0.3)/4), cG = Math.round((total * 0.4)/4), fG = Math.round((total * 0.3)/9);
document.getElementById('pG').innerText = pG+"g"; document.getElementById('cG').innerText = cG+"g"; document.getElementById('fG').innerText = fG+"g"; document.getElementById('pG').innerText = pG+"g"; document.getElementById('cG').innerText = cG+"g"; document.getElementById('fG').innerText = fG+"g";
if(mChart) { mChart.data.datasets[0].data = [pG*4, cG*4, fG*9]; mChart.update(); } if(mChart) { mChart.data.datasets[0].data = [pG*4, cG*4, fG*9]; mChart.update(); }
} }
@@ -167,13 +169,13 @@
const box = document.getElementById('chat'), input = document.getElementById('uIn'); const box = document.getElementById('chat'), input = document.getElementById('uIn');
const text = custom || input.value; if(!text) return; const text = custom || input.value; if(!text) return;
if(!custom) { box.innerHTML += `<div class="msg user shadow-sm">${text}</div>`; input.value=""; } if(!custom) { box.innerHTML += `<div class="msg user shadow-sm">${text}</div>`; input.value=""; }
const id = 'ai-'+Date.now(); box.innerHTML += `<div id="${id}" class="msg ai shadow-lg">Generating Elite Plan...</div>`; const id = 'ai-'+Date.now(); box.innerHTML += `<div id="${id}" class="msg ai shadow">...</div>`;
box.scrollTop = box.scrollHeight; box.scrollTop = box.scrollHeight;
const res = await fetch("https://api.groq.com/openai/v1/chat/completions", { const res = await fetch("https://api.groq.com/openai/v1/chat/completions", {
method: "POST", headers: {"Content-Type":"application/json", "Authorization":`Bearer ${API}`}, method: "POST", headers: {"Content-Type":"application/json", "Authorization":`Bearer ${API}`},
body: JSON.stringify({ model:"llama-3.3-70b-versatile", messages:[ body: JSON.stringify({ model:"llama-3.3-70b-versatile", messages:[
{role:"system", content:`Pro Coach. Target: ${document.getElementById('kcal').innerText} kcal. Macros: P:${document.getElementById('pG').innerText}, C:${document.getElementById('cG').innerText}, F:${document.getElementById('fG').innerText}. Hydration: ${document.getElementById('h2o').innerText}. Use clean Markdown Tables.`}, {role:"system", content:`Expert Nutritionist. Target: ${document.getElementById('kcal').innerText} kcal. Macros: P:${document.getElementById('pG').innerText}, C:${document.getElementById('cG').innerText}, F:${document.getElementById('fG').innerText}. Use clean Markdown Tables and bold headers.`},
{role:"user", content:text} {role:"user", content:text}
]}) ]})
}); });
@@ -184,7 +186,7 @@
window.onload = () => { window.onload = () => {
mChart = new Chart(document.getElementById('mChart').getContext('2d'), { mChart = new Chart(document.getElementById('mChart').getContext('2d'), {
type: 'doughnut', data: { datasets: [{ data: [1,1,1], backgroundColor: ['#0dcaf0','#dc3545','#ffc107'], borderWeight:0 }] }, type: 'doughnut', data: { datasets: [{ data: [1,1,1], backgroundColor: ['#0dcaf0','#dc3545','#ffc107'], borderWeight:0 }] },
options: { plugins: { legend: { display: false } }, cutout: '75%' } options: { plugins: { legend: { display: false } }, cutout: '78%' }
}); });
update(); update();
} }