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:59:42 +02:00
parent 3051d9be60
commit 0ed5d4dbc6
1 changed files with 46 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,37 +3,43 @@
<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 v16.0</title> <title>NutriAI Elite v18.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; --sidebar: #0f172a; --card: #1e293b; --accent: #60a5fa; } :root { --primary: #3b82f6; --bg: #020617; --sidebar: #0f172a; --card: #1e293b; --accent: #60a5fa; --text: #ffffff; }
body.theme-dark { --bg: #020617; --sidebar: #0f172a; --primary: #3b82f6; } body.theme-dark { --bg: #020617; --sidebar: #0f172a; --primary: #3b82f6; }
body.theme-emerald { --bg: #064e3b; --sidebar: #065f46; --primary: #10b981; } body.theme-emerald { --bg: #064e3b; --sidebar: #065f46; --primary: #10b981; }
body.theme-midnight { --bg: #1e1b4b; --sidebar: #312e81; --primary: #818cf8; } body.theme-midnight { --bg: #1e1b4b; --sidebar: #312e81; --primary: #818cf8; }
body.theme-carbon { --bg: #171717; --sidebar: #262626; --primary: #f5f5f5; --accent: #a3a3a3; } body.theme-titanium { --bg: #111827; --sidebar: #1f2937; --primary: #94a3b8; --card: #374151; --accent: #f8fafc; }
body { background-color: var(--bg); color: #fff; font-family: 'Outfit', sans-serif; height: 100vh; overflow: hidden; transition: 0.3s; } body { background-color: var(--bg); color: var(--text); 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: var(--sidebar); border-right: 1px solid rgba(255,255,255,0.1); height: 100vh; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; }
.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; }
.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); } .stat-panel { background: linear-gradient(145deg, var(--primary), #1e3a8a); border-radius: 20px; padding: 1.2rem; margin: 10px 0; box-shadow: 0 8px 16px rgba(0,0,0,0.4); }
.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; } .water-hub { background: rgba(59, 130, 246, 0.1); border: 2px solid var(--primary); border-radius: 20px; padding: 12px; margin: 10px 0; text-align: center; }
.macro-hub { background: rgba(255,255,255,0.05); border-radius: 20px; padding: 20px; margin-top: 15px; } .macro-hub { background: rgba(255,255,255,0.05); border-radius: 20px; padding: 15px; margin-top: 10px; }
.chat-container { height: calc(100vh - 110px); overflow-y: auto; padding: 2rem; } .chat-container { height: calc(100vh - 110px); overflow-y: auto; padding: 2rem; }
.msg { padding: 1.5rem; border-radius: 1.5rem; margin-bottom: 1.2rem; font-size: 1.1rem; max-width: 85%; } .msg { padding: 1.5rem; border-radius: 1.5rem; margin-bottom: 1.2rem; font-size: 1.1rem; max-width: 85%; color: #fff !important; }
.ai { background: var(--card); border-left: 8px solid var(--primary); } .ai { background: var(--card); border-left: 8px solid var(--primary); }
.user { background: var(--primary); margin-left: auto; color: #fff; } .user { background: var(--primary); margin-left: auto; }
table { width: 100%; border-collapse: collapse; margin: 10px 0; color: #fff; }
th, td { border: 1px solid rgba(255,255,255,0.2); padding: 8px; text-align: left; }
th { background: rgba(255,255,255,0.1); }
.top-ctrl { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 100; display: flex; gap: 10px; } .top-ctrl { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 100; display: flex; gap: 10px; }
.btn-shop { background: #f59e0b; color: #000; font-weight: 800; border: none; border-radius: 15px; padding: 0 20px; height: 55px; } .btn-shop { background: #f59e0b; color: #000; font-weight: 800; border: none; border-radius: 15px; padding: 0 20px; height: 55px; }
.btn-reset { background: rgba(239, 68, 68, 0.2); color: #fca5a5; border: 1px solid #ef4444; border-radius: 12px; padding: 10px; font-weight: 700; width: 100%; margin-top: 20px; transition: 0.2s; }
.btn-reset:hover { background: #ef4444; color: #fff; }
</style> </style>
</head> </head>
<body class="theme-dark"> <body class="theme-dark">
@@ -49,7 +55,7 @@
<li><a class="dropdown-item" href="#" onclick="setTheme('dark')">Onyx Dark</a></li> <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('emerald')">Emerald</a></li>
<li><a class="dropdown-item" href="#" onclick="setTheme('midnight')">Midnight</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> <li><a class="dropdown-item" href="#" onclick="setTheme('titanium')">Titanium (Pro)</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -57,13 +63,15 @@
<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">
<h3 class="fw-extrabold mb-4"><i class="fas fa-bolt text-primary"></i> NUTRI ELITE</h3> <h3 class="fw-extrabold mb-3"><i class="fas fa-bolt text-primary"></i> NUTRI ELITE</h3>
<div class="row g-3">
<div class="row g-2">
<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>
<div class="col-6"><label class="label-pro" id="txtH">Height (cm)</label><input type="number" id="h" class="form-control glass-input" value="176" oninput="update()"></div> <div class="col-6"><label class="label-pro" id="txtH">Height (cm)</label><input type="number" id="h" class="form-control glass-input" value="176" oninput="update()"></div>
<div class="col-6"><label class="label-pro">Age</label><input type="number" id="age" class="form-control glass-input" value="30" oninput="update()"></div> <div class="col-6"><label class="label-pro">Age</label><input type="number" id="age" class="form-control glass-input" value="30" oninput="update()"></div>
<div class="col-12"><label class="label-pro">Detailed Activity Level</label>
<div class="col-12"><label class="label-pro">Activity Level</label>
<select id="act" class="form-select glass-input" onchange="update()"> <select id="act" class="form-select glass-input" onchange="update()">
<option value="1.2">Sedentary (Office/No Exercise)</option> <option value="1.2">Sedentary (Office/No Exercise)</option>
<option value="1.375">Lightly Active (1-2 days/week)</option> <option value="1.375">Lightly Active (1-2 days/week)</option>
@@ -77,30 +85,37 @@
<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()">
</div> </div>
</div> </div>
<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 small">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">
<h2 class="fw-bold text-info mb-0" id="h2o">3.9L</h2> <h2 class="fw-bold text-info 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"><i class="fas fa-droplet me-1"></i> Daily Hydration</span>
</div> </div>
<div class="macro-hub"> <div class="macro-hub">
<canvas id="mChart" style="max-height: 160px;"></canvas> <canvas id="mChart" style="max-height: 140px;"></canvas>
<div class="row mt-3 text-center fw-bold"> <div class="row mt-2 text-center fw-bold small">
<div class="col-4"><div class="text-info">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">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">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>
<button class="btn-reset" onclick="resetDashboard()"><i class="fas fa-undo me-2"></i> RESET DASHBOARD</button>
</div> </div>
<div class="col-lg-8 col-xl-9 p-0 bg-opacity-10 bg-black"> <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"> <div class="msg ai shadow">
<h4 class="fw-bold text-primary">Elite Engine Synced.</h4> <h4 class="fw-bold text-primary">System Ready.</h4>
Enter key is now enabled. Type your request and press Enter to generate. I have added the **Reset Button**. All biometrics, themes, and inputs are synchronized. Press **Enter** to talk to your coach.
</div> </div>
</div> </div>
<div class="p-3 border-top border-secondary d-flex gap-2"> <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="Type message and press Enter..." onkeydown="if(event.key === 'Enter') talk()"> <input type="text" id="uIn" class="form-control bg-dark text-white border-primary" placeholder="Type message and press Enter..." onkeydown="if(event.key === 'Enter') talk()">
@@ -139,6 +154,19 @@
} }
} }
function resetDashboard() {
isMetric = true;
document.getElementById('w').value = 110;
document.getElementById('t').value = 85;
document.getElementById('h').value = 176;
document.getElementById('age').value = 30;
document.getElementById('act').value = 1.55;
document.getElementById('agg').value = -300;
document.getElementById('chat').innerHTML = `<div class="msg ai shadow"><h4 class="fw-bold text-primary">System Reset.</h4>Dashboard and Chat history have been cleared. Ready for a new session.</div>`;
setUnits('metric');
update();
}
function update() { function update() {
const wv = parseFloat(document.getElementById('w').value)||0, hv = parseFloat(document.getElementById('h').value)||0; const wv = parseFloat(document.getElementById('w').value)||0, hv = parseFloat(document.getElementById('h').value)||0;
const av = parseFloat(document.getElementById('age').value)||0, act = parseFloat(document.getElementById('act').value); const av = parseFloat(document.getElementById('age').value)||0, act = parseFloat(document.getElementById('act').value);