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:33:35 +02:00
parent 40a0d44803
commit 35b8279769
1 changed files with 68 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,231 +3,107 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NutriAI Elite - High Contrast Pro</title>
<title>NutriAI Elite - High Visibility Pro</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--primary: #3b82f6;
--bg: #020617; /* Deeper black for maximum contrast */
--card: #1e293b;
--text-bright: #ffffff; /* pure white for readability */
--text-dim: #94a3b8;
--bg-dark: #020617;
--card-dark: #1e293b;
--input-bg: #ffffff;
--input-text: #020617;
}
body.light-theme { --bg: #f8fafc; --card: #ffffff; --text-bright: #0f172a; --text-dim: #475569; }
body { background-color: var(--bg-dark); color: #f8fafc; font-family: 'Outfit', sans-serif; transition: 0.3s; }
body {
background-color: var(--bg);
color: var(--text-bright);
font-family: 'Outfit', sans-serif;
transition: 0.4s;
}
.sidebar { background: #0f172a; border-right: 1px solid #334155; min-height: 100vh; padding: 2rem; overflow-y: auto; }
/* Improved Sidebar Visibility */
.sidebar {
background: var(--card);
border-right: 1px solid rgba(255,255,255,0.1);
min-height: 100vh;
padding: 2rem;
}
.label-bright { color: #3b82f6; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; margin-bottom: 5px; display: block; }
.glass-input {
background: rgba(15, 23, 42, 0.6) !important;
border: 2px solid #334155 !important;
color: #ffffff !important; /* Forces input text to be bright white */
font-weight: 500;
}
/* Professional AI Response Cards */
.chat-area {
height: 65vh;
overflow-y: auto;
padding: 25px;
background: rgba(0,0,0,0.3);
border-radius: 24px;
}
.msg {
padding: 1.8rem;
border-radius: 20px;
margin-bottom: 2rem;
max-width: 90%;
font-size: 1.15rem; /* Larger font */
line-height: 1.8;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}
.ai {
background: #1e293b;
border: 1px solid #334155;
color: #ffffff !important;
}
.ai table {
width: 100%;
margin: 15px 0;
border-collapse: collapse;
background: rgba(0,0,0,0.2);
.form-control, .form-select {
background: var(--input-bg) !important;
color: var(--input-text) !important;
border: 2px solid var(--primary) !important;
font-weight: 700 !important;
border-radius: 10px;
overflow: hidden;
}
.ai th, .ai td { padding: 12px; border: 1px solid #475569; text-align: left; }
.ai th { background: var(--primary); color: white; }
.user { background: var(--primary); margin-left: auto; color: white; font-weight: 600; }
.kcal-hub {
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
padding: 2rem; border-radius: 20px;
border: 2px solid rgba(255,255,255,0.1);
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
padding: 1.5rem; border-radius: 15px; border: 1px solid #60a5fa; margin-top: 20px;
}
.input-bar {
background: #1e293b;
border-radius: 15px;
padding: 12px 25px;
border: 2px solid #3b82f6;
}
.chat-area { height: 60vh; overflow-y: auto; padding: 20px; background: rgba(0,0,0,0.3); border-radius: 20px; }
#userInput { color: white !important; font-size: 1.2rem; }
.msg { padding: 1.5rem; border-radius: 15px; margin-bottom: 1.5rem; max-width: 95%; line-height: 1.6; }
.ai { background: #1e293b; border: 1px solid #334155; color: #ffffff; }
.user { background: #10b981; margin-left: auto; color: white; font-weight: 600; }
table { width: 100%; border-collapse: collapse; margin: 15px 0; background: #0f172a; border-radius: 8px; overflow: hidden; }
th, td { padding: 12px; border: 1px solid #334155; text-align: left; font-size: 0.95rem; }
th { background: #3b82f6; color: white; }
.input-bar { background: #1e293b; border-radius: 50px; padding: 10px 25px; border: 2px solid var(--primary); }
#userInput { color: white !important; font-size: 1.1rem; }
</style>
</head>
<body>
<div class="top-controls p-3 d-flex justify-content-end gap-3 position-fixed w-100" style="z-index: 10;">
<div class="btn-group shadow-lg">
<input type="radio" class="btn-check" name="units" id="metric" checked onchange="toggleUnits()">
<label class="btn btn-primary px-4" for="metric">Metric</label>
<input type="radio" class="btn-check" name="units" id="imperial" onchange="toggleUnits()">
<label class="btn btn-primary px-4" for="imperial">Imperial</label>
</div>
<button class="btn btn-outline-light rounded-pill" onclick="setTheme('light')"><i class="fas fa-sun"></i></button>
<button class="btn btn-outline-light rounded-pill" onclick="setTheme('dark')"><i class="fas fa-moon"></i></button>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 sidebar">
<h2 class="fw-extrabold mb-5"><i class="fas fa-shield-alt text-primary me-2"></i>NutriAI <span class="text-primary">Pro</span></h2>
<h3 class="fw-bold mb-4 text-primary"><i class="fas fa-heartbeat me-2"></i>NutriAI Elite</h3>
<div class="row g-3 mb-4">
<div class="row g-2 mb-3">
<div class="col-6">
<label class="small fw-bold text-dim">Age</label>
<input type="number" id="age" class="form-control glass-input" value="30">
<label class="label-bright">Current (kg)</label>
<input type="number" id="weight" class="form-control" value="85" oninput="updateProfile()">
</div>
<div class="col-6">
<label class="small fw-bold text-dim">Sex</label>
<select id="sex" class="form-select glass-input">
<label class="label-bright">Target (kg)</label>
<input type="number" id="targetWeight" class="form-control" value="75" oninput="updateProfile()">
</div>
<div class="col-6">
<label class="label-bright">Height (cm)</label>
<input type="number" id="height" class="form-control" value="180" oninput="updateProfile()">
</div>
<div class="col-6">
<label class="label-bright">Age</label>
<input type="number" id="age" class="form-control" value="30" oninput="updateProfile()">
</div>
</div>
<label class="label-bright">Biological Sex</label>
<select id="sex" class="form-select mb-3" onchange="updateProfile()">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="col-6">
<label class="small fw-bold text-dim" id="labelHeight">Height (cm)</label>
<input type="number" id="height" class="form-control glass-input" value="180">
</div>
<div class="col-6">
<label class="small fw-bold text-dim" id="labelWeight">Weight (kg)</label>
<input type="number" id="weight" class="form-control glass-input" value="85">
</div>
<label class="label-bright">Activity Level</label>
<select id="activity" class="form-select mb-3" onchange="updateProfile()">
<option value="1.2">Sedentary (No Exercise)</option>
<option value="1.375">Lightly Active (1-3 days)</option>
<option value="1.55">Moderately Active (3-5 days)</option>
<option value="1.725">Very Active (Daily Heavy)</option>
</select>
<label class="label-bright">Daily Deficit/Surplus</label>
<select id="goalType" class="form-select mb-4" onchange="updateProfile()">
<option value="-1000">Extreme Weight Loss (-1000 kcal)</option>
<option value="-500" selected>Steady Weight Loss (-500 kcal)</option>
<option value="0">Maintenance (Stay Same)</option>
<option value="300">Lean Bulk (+300 kcal)</option>
<option value="500">Aggressive Bulk (+500 kcal)</option>
</select>
<div class="kcal-hub text-center shadow">
<small class="fw-bold text-uppercase opacity-75">Your Daily Goal</small>
<h1 class="display-5 fw-bold mb-0" id="totalKcal">0</h1>
<span class="small">CALORIES / DAY</span>
</div>
<div class="kcal-hub mb-4">
<h4 class="small text-uppercase fw-bold opacity-75">Daily Target</h4>
<h1 class="display-4 fw-bold mb-0" id="totalKcal">2500</h1>
<p class="mb-0">Calories</p>
</div>
<button onclick="updateProfile()" class="btn btn-primary w-100 py-3 fw-bold rounded-pill shadow-lg">
<i class="fas fa-sync me-2"></i>UPDATE PROFILE
</button>
</div>
<div class="col-lg-9 p-5 mt-5">
<div id="chatBox" class="chat-area">
<div class="msg ai">
<h4 class="fw-bold mb-3">Welcome to Elite Coaching</h4>
Your biometric profile has been synced. I am ready to generate <strong>Professional Meal Plans</strong> or <strong>Macro Breakdowns</strong> using high-precision calculations.
</div>
</div>
<div class="input-bar d-flex align-items-center mt-4">
<input type="text" id="userInput" class="form-control bg-transparent border-0"
placeholder="Ask for a 7-day meal plan table...">
<button onclick="sendToGroq()" class="btn btn-primary rounded-pill px-4 ms-2 py-2">
SEND <i class="fas fa-paper-plane ms-2"></i>
</button>
</div>
</div>
</div>
</div>
<script>
const GROQ_API_KEY = "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";
let isMetric = true;
function setTheme(t) { document.body.className = t + '-theme'; }
document.getElementById('userInput').addEventListener('keypress', (e) => { if(e.key === 'Enter') sendToGroq(); });
async function sendToGroq() {
const input = document.getElementById('userInput');
const text = input.value.trim();
if(!text) return;
addMsg('user', text);
input.value = "";
const loadId = 'load-' + Date.now();
addMsg('ai', '<div class="spinner-border spinner-border-sm text-primary"></div> AI is generating your professional report...', loadId);
try {
const systemPrompt = `You are a World-Class Nutritionist.
User Target: ${document.getElementById('totalKcal').innerText} kcal.
Units: ${isMetric ? 'Metric' : 'Imperial'}.
FORMATTING RULES:
1. Use Markdown TABLES for all meal plans.
2. Use BOLD headers for sections.
3. Include a "Macro Breakdown" section for every day.
4. Be concise but professional. Respond in English only.`;
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: systemPrompt }, { role: "user", content: text }]
})
});
const data = await resp.json();
// Using marked.js or simple formatting
let aiText = data.choices[0].message.content.replace(/\n/g, '<br>');
document.getElementById(loadId).innerHTML = `<div>${aiText}</div>`;
} catch(e) { document.getElementById(loadId).innerText = "Error!"; }
}
function addMsg(type, content, id = null) {
const b = document.getElementById('chatBox');
b.innerHTML += `<div class="msg ${type}" ${id ? `id="${id}"` : ''}>${content}</div>`;
b.scrollTop = b.scrollHeight;
}
function toggleUnits() {
isMetric = document.getElementById('metric').checked;
updateProfile();
}
function updateProfile() {
const age = parseFloat(document.getElementById('age').value);
const h = parseFloat(document.getElementById('height').value);
const w = parseFloat(document.getElementById('weight').value);
const sex = document.getElementById('sex').value;
// Simple BMR
let bmr = (sex === 'male') ? (10 * w) + (6.25 * h) - (5 * age) + 5 : (10 * w) + (6.25 * h) - (5 * age) - 161;
document.getElementById('totalKcal').innerText = Math.round(bmr * 1.5);
}
updateProfile();
</script>
</body>
</html>
<p class="mt-3 small text