s
This commit is contained in:
Ionel Andrei Cataon
@@ -2,8 +2,8 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>NutriAI Elite v18.0</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>NutriAI Elite v19.0</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">
|
||||
@@ -17,113 +17,112 @@
|
||||
body.theme-midnight { --bg: #1e1b4b; --sidebar: #312e81; --primary: #818cf8; }
|
||||
body.theme-titanium { --bg: #111827; --sidebar: #1f2937; --primary: #94a3b8; --card: #374151; --accent: #f8fafc; }
|
||||
|
||||
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; display: flex; flex-direction: column; }
|
||||
body { background-color: var(--bg); color: var(--text); font-family: 'Outfit', sans-serif; height: 100dvh; overflow: hidden; transition: 0.3s; }
|
||||
|
||||
/* Mobile Responsive Layout */
|
||||
.main-wrapper { display: flex; height: 100dvh; flex-direction: row; }
|
||||
@media (max-width: 991px) {
|
||||
.main-wrapper { flex-direction: column; overflow-y: auto; height: auto; }
|
||||
.sidebar { width: 100% !important; height: auto !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1); }
|
||||
.chat-section { height: 600px !important; }
|
||||
body { overflow-y: auto; }
|
||||
}
|
||||
|
||||
.sidebar { width: 350px; background: var(--sidebar); border-right: 1px solid rgba(255,255,255,0.1); padding: 1.5rem; overflow-y: auto; flex-shrink: 0; }
|
||||
.chat-section { flex-grow: 1; display: flex; flex-direction: column; background: rgba(0,0,0,0.2); position: relative; }
|
||||
|
||||
.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; }
|
||||
|
||||
.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: 12px; margin: 10px 0; text-align: center; }
|
||||
.stat-panel { background: linear-gradient(145deg, var(--primary), #1e3a8a); border-radius: 20px; padding: 1rem; margin: 10px 0; text-align: center; }
|
||||
.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; }
|
||||
.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); }
|
||||
.user { background: var(--primary); margin-left: auto; }
|
||||
.chat-container { flex-grow: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; }
|
||||
.msg { padding: 1.2rem; border-radius: 1.2rem; margin-bottom: 1rem; font-size: 1rem; max-width: 90%; color: #fff !important; word-wrap: break-word; }
|
||||
.ai { background: var(--card); border-left: 6px solid var(--primary); align-self: flex-start; }
|
||||
.user { background: var(--primary); align-self: flex-end; }
|
||||
|
||||
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 { padding: 10px; display: flex; justify-content: flex-end; gap: 8px; background: rgba(0,0,0,0.3); }
|
||||
.input-area { padding: 15px; background: var(--sidebar); border-top: 1px solid rgba(255,255,255,0.1); }
|
||||
|
||||
.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-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; }
|
||||
.btn-reset { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid #ef4444; border-radius: 12px; padding: 8px; font-weight: 700; width: 100%; margin-top: 15px; }
|
||||
|
||||
/* Table fixes for mobile */
|
||||
.msg table { width: 100%; display: block; overflow-x: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<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('titanium')">Titanium (Pro)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-xl-3 sidebar">
|
||||
<div class="main-wrapper">
|
||||
<div class="sidebar">
|
||||
<h3 class="fw-extrabold mb-3"><i class="fas fa-bolt text-primary"></i> NUTRI ELITE</h3>
|
||||
|
||||
<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="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">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" id="txtW">Weight</label><input type="number" id="w" class="form-control glass-input" placeholder="--" oninput="update()"></div>
|
||||
<div class="col-6"><label class="label-pro" id="txtT">Target</label><input type="number" id="t" class="form-control glass-input" placeholder="--" oninput="update()"></div>
|
||||
<div class="col-6"><label class="label-pro" id="txtH">Height</label><input type="number" id="h" class="form-control glass-input" placeholder="--" oninput="update()"></div>
|
||||
<div class="col-6"><label class="label-pro">Age</label><input type="number" id="age" class="form-control glass-input" placeholder="--" oninput="update()"></div>
|
||||
|
||||
<div class="col-12"><label class="label-pro">Activity Level</label>
|
||||
<div class="col-12">
|
||||
<label class="label-pro">Activity</label>
|
||||
<select id="act" class="form-select glass-input" onchange="update()">
|
||||
<option value="1.2">Sedentary (Office/No Exercise)</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.725">Very Active (6-7 days/week)</option>
|
||||
<option value="1.9">Extra Active (Athlete/Physical Labor)</option>
|
||||
<option value="" disabled selected>Select activity...</option>
|
||||
<option value="1.2">Sedentary</option>
|
||||
<option value="1.375">Lightly Active</option>
|
||||
<option value="1.55">Moderately Active</option>
|
||||
<option value="1.725">Very Active</option>
|
||||
<option value="1.9">Extra Active</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<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()">
|
||||
<label class="label-pro d-flex justify-content-between">Adjustment <span id="aggDisp">0 kcal</span></label>
|
||||
<input type="range" id="agg" class="form-range" min="-1000" max="1000" step="50" value="0" oninput="update()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-panel text-center">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="water-hub">
|
||||
<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>
|
||||
<div class="stat-panel">
|
||||
<h1 class="fw-bold mb-0" id="kcal">0</h1>
|
||||
<p class="text-uppercase fw-bold m-0 opacity-75 small">Target Calories</p>
|
||||
</div>
|
||||
|
||||
<div class="macro-hub">
|
||||
<canvas id="mChart" style="max-height: 140px;"></canvas>
|
||||
<canvas id="mChart" style="max-height: 120px;"></canvas>
|
||||
<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-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 text-info">P: <span id="pG">0g</span></div>
|
||||
<div class="col-4 text-danger">C: <span id="cG">0g</span></div>
|
||||
<div class="col-4 text-warning">F: <span id="fG">0g</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn-reset" onclick="resetDashboard()"><i class="fas fa-undo me-2"></i> RESET DASHBOARD</button>
|
||||
<button class="btn-reset" onclick="resetAll()"><i class="fas fa-sync me-2"></i> RESET SYSTEM</button>
|
||||
</div>
|
||||
|
||||
<div class="chat-section">
|
||||
<div class="top-ctrl">
|
||||
<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 class="dropdown">
|
||||
<button class="btn btn-light btn-sm rounded-pill px-3" 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</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('titanium')">Titanium</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8 col-xl-9 p-0 bg-opacity-10 bg-black">
|
||||
<div id="chat" class="chat-container">
|
||||
<div class="msg ai shadow">
|
||||
<h4 class="fw-bold text-primary">System Ready.</h4>
|
||||
I have added the **Reset Button**. All biometrics, themes, and inputs are synchronized. Press **Enter** to talk to your coach.
|
||||
<h5 class="fw-bold text-primary">Mobile Engine Synced.</h5>
|
||||
The dashboard is now fully responsive. Input your data to begin.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-3 border-top border-secondary d-flex gap-2">
|
||||
<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()">
|
||||
<button class="btn btn-primary px-4" onclick="talk()"><i class="fas fa-paper-plane"></i></button>
|
||||
</div>
|
||||
<button class="btn-shop shadow" onclick="talk('Generate shopping list for current plan')">
|
||||
<i class="fas fa-shopping-basket me-2"></i> SHOPPING LIST
|
||||
</button>
|
||||
<div class="input-area">
|
||||
<div class="input-group">
|
||||
<input type="text" id="uIn" class="form-control bg-dark text-white border-primary" placeholder="Type and press ENTER..." onkeydown="if(event.key === 'Enter') talk()">
|
||||
<button class="btn btn-primary" onclick="talk()"><i class="fas fa-paper-plane"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -136,76 +135,57 @@
|
||||
|
||||
function setTheme(t) { document.body.className = 'theme-' + t; }
|
||||
|
||||
function setUnits(mode) {
|
||||
if((mode==='metric' && !isMetric) || (mode==='imperial' && isMetric)) {
|
||||
isMetric = !isMetric;
|
||||
const w = document.getElementById('w'), t = document.getElementById('t'), h = document.getElementById('h');
|
||||
if(isMetric) {
|
||||
w.value = (w.value/2.205).toFixed(0); t.value = (t.value/2.205).toFixed(0); h.value = (h.value*2.54).toFixed(0);
|
||||
} else {
|
||||
w.value = (w.value*2.205).toFixed(0); t.value = (t.value*2.205).toFixed(0); h.value = (h.value/2.54).toFixed(0);
|
||||
}
|
||||
document.getElementById('txtW').innerText = isMetric ? "Current (kg)" : "Current (lb)";
|
||||
document.getElementById('txtT').innerText = isMetric ? "Target (kg)" : "Target (lb)";
|
||||
document.getElementById('txtH').innerText = isMetric ? "Height (cm)" : "Height (in)";
|
||||
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-sm" : "btn btn-outline-primary btn-sm";
|
||||
update();
|
||||
}
|
||||
}
|
||||
|
||||
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() {
|
||||
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)||1;
|
||||
const agg = parseInt(document.getElementById('agg').value);
|
||||
if(!wv || !hv || !av) return;
|
||||
|
||||
const wc = isMetric ? wv : wv/2.205, hc = isMetric ? hv : hv*2.54;
|
||||
const bmr = (10 * wc) + (6.25 * hc) - (5 * av) + 5;
|
||||
const total = Math.round((bmr * act) + agg);
|
||||
|
||||
document.getElementById('kcal').innerText = total;
|
||||
document.getElementById('aggDisp').innerText = (agg>0?'+':'')+agg+" kcal";
|
||||
document.getElementById('h2o').innerText = (wc * 0.035).toFixed(1) + "L";
|
||||
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";
|
||||
if(mChart) { mChart.data.datasets[0].data = [pG*4, cG*4, fG*9]; mChart.update(); }
|
||||
}
|
||||
|
||||
async function talk(custom) {
|
||||
function resetAll() {
|
||||
['w','t','h','age','agg'].forEach(id => document.getElementById(id).value = id === 'agg' ? 0 : "");
|
||||
document.getElementById('act').selectedIndex = 0;
|
||||
document.getElementById('kcal').innerText = "0";
|
||||
document.getElementById('chat').innerHTML = `<div class="msg ai shadow">System reset. All fields cleared.</div>`;
|
||||
if(mChart) { mChart.data.datasets[0].data = [1,1,1]; mChart.update(); }
|
||||
}
|
||||
|
||||
async function talk() {
|
||||
const box = document.getElementById('chat'), input = document.getElementById('uIn');
|
||||
const text = custom || input.value; if(!text) return;
|
||||
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">Generating...</div>`;
|
||||
const text = input.value; if(!text) return;
|
||||
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">Thinking...</div>`;
|
||||
box.scrollTop = box.scrollHeight;
|
||||
try {
|
||||
const res = await fetch("https://api.groq.com/openai/v1/chat/completions", {
|
||||
method: "POST", headers: {"Content-Type":"application/json", "Authorization":`Bearer ${API}`},
|
||||
body: JSON.stringify({ model:"llama-3.3-70b-versatile", messages:[
|
||||
{role:"system", content:`Pro Nutritionist. Target: ${document.getElementById('kcal').innerText} kcal. P:${document.getElementById('pG').innerText}. Use clean Markdown Tables.`},
|
||||
{role:"system", content:`Pro Nutritionist. Target: ${document.getElementById('kcal').innerText} kcal. Use Markdown tables.`},
|
||||
{role:"user", content:text}
|
||||
]})
|
||||
});
|
||||
const d = await res.json();
|
||||
document.getElementById(id).innerHTML = marked.parse(d.choices[0].message.content);
|
||||
} catch(e) { document.getElementById(id).innerText = "Connection Error."; }
|
||||
box.scrollTop = box.scrollHeight;
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
mChart = new Chart(document.getElementById('mChart').getContext('2d'), {
|
||||
type: 'doughnut', data: { datasets: [{ data: [1,1,1], backgroundColor: ['#0dcaf0','#dc3545','#ffc107'], borderWeight:0 }] },
|
||||
options: { plugins: { legend: { display: false } }, cutout: '78%' }
|
||||
options: { plugins: { legend: { display: false } }, cutout: '75%' }
|
||||
});
|
||||
update();
|
||||
resetAll(); // Ensures empty fields on page load
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user