197 lines
9.2 KiB
HTML
197 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ro">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NutriAI Elite v4.0</title>
|
|
<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: #0f172a; --card: #1e293b; --text: #f8fafc;
|
|
}
|
|
|
|
/* Teme de culoare */
|
|
body.light-theme { --bg: #f1f5f9; --card: #ffffff; --text: #1e293b; }
|
|
body.blue-theme { --bg: #1e3a8a; --card: #1e40af; --text: #ffffff; }
|
|
|
|
body {
|
|
background-color: var(--bg); color: var(--text);
|
|
font-family: 'Outfit', sans-serif; transition: 0.4s;
|
|
}
|
|
|
|
.sidebar {
|
|
background: var(--card); border-right: 1px solid rgba(255,255,255,0.1);
|
|
min-height: 100vh; padding: 2rem;
|
|
}
|
|
|
|
.glass-input {
|
|
background: rgba(0,0,0,0.2) !important; border: 1px solid rgba(255,255,255,0.1) !important;
|
|
color: var(--text) !important; border-radius: 12px; padding: 10px;
|
|
}
|
|
|
|
.kcal-hub {
|
|
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
|
border-radius: 20px; padding: 2rem; text-align: center; box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
|
|
}
|
|
|
|
.chat-area { height: 60vh; overflow-y: auto; padding: 20px; border-radius: 20px; background: rgba(0,0,0,0.1); }
|
|
|
|
.msg { padding: 1.5rem; border-radius: 1.5rem; margin-bottom: 1.5rem; max-width: 85%; font-size: 1.1rem; line-height: 1.6; }
|
|
.ai { background: var(--card); border-left: 5px solid #3b82f6; }
|
|
.user { background: #10b981; margin-left: auto; color: white; font-weight: 500; }
|
|
|
|
.theme-selector { position: fixed; top: 20px; right: 20px; z-index: 1000; }
|
|
.input-bar {
|
|
background: var(--card); border-radius: 50px; padding: 10px 25px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="theme-selector dropdown">
|
|
<button class="btn btn-dark rounded-pill px-4 shadow dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="fas fa-palette me-2"></i>Aspect
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#" onclick="setTheme('dark')">Dark Mode</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="setTheme('light')">Light Mode</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="setTheme('blue')">Ocean Blue</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-lg-3 sidebar">
|
|
<h3 class="fw-bold mb-4"><i class="fas fa-dna me-2 text-primary"></i>Profil Bio</h3>
|
|
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-6">
|
|
<label class="small opacity-75">Vârstă</label>
|
|
<input type="number" id="varsta" class="form-control glass-input" value="30">
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="small opacity-75">Sex</label>
|
|
<select id="sex" class="form-select glass-input">
|
|
<option value="masculin">Masculin</option>
|
|
<option value="feminin">Feminin</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="small opacity-75">Înălțime (cm)</label>
|
|
<input type="number" id="inaltime" class="form-control glass-input" value="180">
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="small opacity-75">Greutate (kg)</label>
|
|
<input type="number" id="greutate" class="form-control glass-input" value="85">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="small opacity-75">Nivel Activitate</label>
|
|
<select id="activitate" class="form-select glass-input">
|
|
<option value="1.2">Sedentar (Birou)</option>
|
|
<option value="1.375">Ușor Activ (1-2 zile sport)</option>
|
|
<option value="1.55">Moderat Activ (3-5 zile sport)</option>
|
|
<option value="1.725">Foarte Activ (Zilnic/Fizic)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="fw-bold d-flex justify-content-between">
|
|
Obiectiv <span><span id="objLabel">0</span> kcal</span>
|
|
</label>
|
|
<input type="range" class="form-range" id="kcalAdjust" min="-1000" max="1000" step="50" value="0">
|
|
</div>
|
|
|
|
<div class="kcal-hub shadow-lg">
|
|
<small class="text-uppercase opacity-75">Ținta ta calorică</small>
|
|
<h1 class="fw-bold display-5 mb-0" id="totalKcal">2500</h1>
|
|
<span class="small fw-bold">KCAL / ZI</span>
|
|
</div>
|
|
|
|
<button onclick="updateProfile()" class="btn btn-primary w-100 mt-4 py-3 fw-bold rounded-pill">
|
|
<i class="fas fa-sync-alt me-2"></i>ACTUALIZEAZĂ DATE
|
|
</button>
|
|
</div>
|
|
|
|
<div class="col-lg-9 p-5">
|
|
<h2 class="fw-bold mb-4">Asistent Personalizat AI</h2>
|
|
<div id="chatBox" class="chat-area shadow-inner">
|
|
<div class="msg ai shadow-sm">
|
|
<h5 class="fw-bold">Sistem Gata.</h5>
|
|
Salut! Sunt antrenorul tău digital. Am preluat toate detaliile tale biometrice. <br>
|
|
<strong>Cu ce începem?</strong> Îmi poți cere un meniu saptamanal sau un plan de antrenament.
|
|
</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 text-white"
|
|
placeholder="Scrie aici și apasă ENTER..." style="font-size: 1.2rem;">
|
|
<button onclick="sendToGroq()" class="btn btn-primary rounded-circle p-3 ms-2" style="width: 55px; height: 55px;">
|
|
<i class="fas fa-paper-plane"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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 currentKcal = 0;
|
|
|
|
function setTheme(theme) {
|
|
document.body.className = theme + '-theme';
|
|
}
|
|
|
|
document.getElementById('userInput').addEventListener('keypress', (e) => { if(e.key === 'Enter') sendToGroq(); });
|
|
|
|
function updateProfile() {
|
|
const v = parseFloat(document.getElementById('varsta').value);
|
|
const s = document.getElementById('sex').value;
|
|
const i = parseFloat(document.getElementById('inaltime').value);
|
|
const g = parseFloat(document.getElementById('greutate').value);
|
|
const act = parseFloat(document.getElementById('activitate').value);
|
|
const adj = parseInt(document.getElementById('kcalAdjust').value);
|
|
|
|
let bmr = (s === 'masculin') ? (10 * g) + (6.25 * i) - (5 * v) + 5 : (10 * g) + (6.25 * i) - (5 * v) - 161;
|
|
currentKcal = Math.round((bmr * act) + adj);
|
|
|
|
document.getElementById('totalKcal').innerText = currentKcal;
|
|
document.getElementById('objLabel').innerText = (adj > 0 ? '+' : '') + adj;
|
|
}
|
|
|
|
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> Gândesc...', loadId);
|
|
|
|
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: `Ești un nutriționist expert. Profil utilizator: ${currentKcal} kcal/zi. Răspunde în ROMÂNĂ cu meniuri și sfaturi saptamanale.` }, { role: "user", content: text }]
|
|
})
|
|
});
|
|
const data = await resp.json();
|
|
document.getElementById(loadId).innerHTML = `<div style="white-space: pre-wrap">${data.choices[0].message.content}</div>`;
|
|
} catch(e) { document.getElementById(loadId).innerText = "Eroare de conexiune!"; }
|
|
}
|
|
|
|
function addMsg(type, content, id = null) {
|
|
const b = document.getElementById('chatBox');
|
|
b.innerHTML += `<div class="msg ${type} shadow-sm" ${id ? `id="${id}"` : ''}>${content}</div>`;
|
|
b.scrollTop = b.scrollHeight;
|
|
}
|
|
updateProfile();
|
|
</script>
|
|
</body>
|
|
</html> |