!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Fitness Tracker</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="supabase-config.js"></script>
<header class="dashboard-header">
<div class="dashboard-top">
<div class="dashboard-logo">
<span class="logo-mark">BMI</span>
<span class="logo-text">FITNESS TRACKER</span>
</div>
<nav class="dashboard-nav">
<a href="#home">HOME</a>
<a href="#calculator">BMI TRACKER</a>
<a href="#guide">HEALTH GUIDE</a>
<a href="#goals">GOALS</a>
<a href="#questionnaire">QUESTIONNAIRE</a>
<a href="#progress">PROGRESS</a>
</nav>
<button class="menu-button" onclick="toggleDashboardMenu()">
☰
</button>
<button type="button" class="login-button" onclick="logout()">
LOGOUT
</button>
</div>
<div class="dashboard-menu" id="dashboardMenu">
<a href="#home" onclick="closeDashboardMenu()">HOME</a>
<a href="#calculator" onclick="closeDashboardMenu()">BMI TRACKER</a>
<a href="#guide" onclick="closeDashboardMenu()">HEALTH GUIDE</a>
<a href="#goals" onclick="closeDashboardMenu()">GOALS</a>
<a href="#questionnaire" onclick="closeDashboardMenu()">QUESTIONNAIRE</a>
<a href="#progress" onclick="closeDashboardMenu()">PROGRESS</a>
</div>
<div class="dashboard-hero" id="home">
<div class="dashboard-hero-content">
<p class="hero-label">
STUDENT HEALTH MONITORING SYSTEM
</p>
<h1>
BMI <span>TRACKER</span>
</h1>
<p class="hero-description">
Monitor your BMI, track your fitness progress,
and build healthier habits.
</p>
<button
class="hero-button"
onclick="document.getElementById('calculator').scrollIntoView({ behavior: 'smooth' })"
>
GET STARTED
</button>
</div>
<div class="human-model-area">
<div class="human-model-placeholder">
<svg
class="human-model"
viewBox="0 0 240 520"
xmlns="http://www.w3.org/2000/svg"
aria-label="Fitness human model"
style="width: 230px; height: 500px; color: #00eaff;"
>
<!-- head -->
<circle cx="120" cy="45" r="25" fill="currentColor"/>
<!-- neck -->
<rect x="109" y="68" width="22" height="25" rx="8" fill="currentColor"/>
<!-- body -->
<path
d="
M98 88
C84 92 73 104 70 122
L82 137
L91 117
L94 202
C94 219 101 231 108 238
L108 300
L132 300
L132 238
C139 231 146 219 146 202
L149 117
L158 137
L170 122
C167 104 156 92 142 88
Z"
fill="currentColor"
/>
<!-- left arm -->
<path
d="
M73 116
C65 125 59 146 56 166
L45 235
C44 243 49 248 56 249
C63 250 67 245 68 238
L80 174
L91 132
Z"
fill="currentColor"
/>
<!-- right arm -->
<path
d="
M167 116
C175 125 181 146 184 166
L195 235
C196 243 191 248 184 249
C177 250 173 245 172 238
L160 174
L149 132
Z"
fill="currentColor"
/>
<!-- left leg -->
<path
d="
M108 292
L96 365
L86 468
C85 478 91 484 101 484
L109 484
L120 392
L120 300
Z"
fill="currentColor"
/>
<!-- right leg -->
<path
d="
M132 292
L144 365
L154 468
C155 478 149 484 139 484
L131 484
L120 392
L120 300
Z"
fill="currentColor"
/>
<!-- small fitness detail -->
<path
d="M102 155 Q120 164 138 155"
fill="none"
stroke="#07111f"
stroke-width="5"
stroke-linecap="round"
opacity="0.45"
/>
</svg>
</div>
</div>
</div>
</header>
<main>
<section>
<h2>Welcome</h2>
<p>
This website helps students monitor their BMI,
receive health recommendations, and track their fitness progress.
</p>
</section>
<section id="calculator" class="calculator-section">
<div class="section-heading">
<span class="section-number">01</span>
<div>
<p class="section-label">HEALTH ANALYSIS</p>
<h2>BMI CALCULATOR</h2>
</div>
</div>
<p class="section-description">
Enter your information below to calculate your BMI and receive
a personalized health status.
</p>
<div class="calculator-grid">
<div class="input-group">
<label for="height">HEIGHT</label>
<div class="input-wrapper">
<input
type="number"
id="height"
placeholder="Enter height"
>
<span>CM</span>
</div>
</div>
<div class="input-group">
<label for="weight">WEIGHT</label>
<div class="input-wrapper">
<input
type="number"
id="weight"
placeholder="Enter weight"
>
<span>KG</span>
</div>
</div>
<div class="input-group">
<label for="age">AGE</label>
<div class="input-wrapper">
<input
type="number"
id="age"
placeholder="Enter age"
>
<span>YRS</span>
</div>
</div>
<div class="input-group">
<label for="sex">SEX</label>
<select id="sex">
<option value="">Select sex</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<button
class="primary-action"
onclick="calculateBMI()"
>
CALCULATE BMI
</button>
<div class="bmi-status-panel">
<div class="status-header">
<span class="status-dot"></span>
BMI ANALYSIS COMPLETE
</div>
<div class="status-main">
<p class="status-label">YOUR CURRENT BMI</p>
<p id="bmiResult" class="bmi-value"></p>
</div>
<div class="status-recommendation">
<p class="status-label">HEALTH RECOMMENDATION</p>
<p id="recommendation"></p>
<p id="overallRecommendation"></p>
</div>
</div>
</section>
<section id="guide" class="guide-section">
<div class="section-heading">
<span class="section-number">02</span>
<div>
<p class="section-label">PERSONALIZED SUPPORT</p>
<h2>HEALTH GUIDE</h2>
</div>
</div>
<p class="section-description">
Explore simple health guidance based on your fitness information,
goals, and personal needs.
</p>
<div class="guide-grid">
<div class="guide-card">
<div class="guide-icon">01</div>
<h3>FOOD</h3>
<p id="foodGuide">
Complete the health questionnaire to receive personalized food guidance.
</p>
</div>
<div class="guide-card">
<div class="guide-icon">02</div>
<h3>EXERCISE</h3>
<p id="exerciseGuide">
Complete the health questionnaire to receive personalized exercise guidance.
</p>
</div>
<div class="guide-card">
<div class="guide-icon">03</div>
<h3>ROUTINE</h3>
<p id="routineGuide">
Complete the health questionnaire to receive personalized routine guidance.
</p>
</div>
<div class="guide-card">
<div class="guide-icon">04</div>
<h3>ALLERGIES</h3>
<p id="allergyGuide">
Your allergy information will be considered when providing recommendations.
</p>
</div>
</div>
</section>
<section id="goals" class="goals-section">
<div class="section-heading">
<span class="section-number">03</span>
<div>
<p class="section-label">PERSONAL DEVELOPMENT</p>
<h2>MY GOALS</h2>
</div>
</div>
<p class="section-description">
Set a simple fitness goal and monitor your progress as you
build healthier habits.
</p>
<div class="goal-panel">
<div class="goal-input-area">
<label for="goalType">SELECT YOUR GOAL</label>
<select id="goalType">
<option value="">Choose a goal</option>
<option value="exercise">Exercise regularly</option>
<option value="water">Drink more water</option>
<option value="sleep">Improve sleep</option>
<option value="food">Eat healthier</option>
<option value="screen">Reduce screen time</option>
<option value="bmi">Maintain a healthy BMI</option>
</select>
<label for="goalTarget">TARGET</label>
<input
type="text"
id="goalTarget"
placeholder="Example: Exercise 4 times a week"
>
<button
class="primary-action"
onclick="saveGoal()"
>
SAVE GOAL
</button>
</div>
<div class="goal-display">
<div class="goal-status">
<span class="status-dot"></span>
CURRENT GOAL
</div>
<h3 id="currentGoal">
No goal set yet.
</h3>
<p id="goalMessage">
Set your first goal to start tracking your progress.
</p>
<div class="goal-progress">
<p>GOAL PROGRESS</p>
<strong id="goalProgress">0%</strong>
</div>
<div class="daily-goal-tracker">
<p>DAILY TRACKER</p>
<input
type="number"
id="dailyGoalValue"
placeholder="Enter today's progress"
min="0"
step="0.1"
>
<p id="dailyGoalUnit"></p>
<button
class="primary-action"
onclick="recordDailyGoal()"
>
RECORD TODAY
</button>
<div class="goal-history">
<p>GOAL HISTORY</p>
<div id="goalHistoryList">
No goal records yet.
</div>
</div>
<p id="dailyGoalMessage"></p>
</div>
</div>
</div>
<div class="motivation-card">
<p class="section-label">DAILY MOTIVATION</p>
<h3 id="motivationalMessage">
Start small. Stay consistent. Keep moving forward.
</h3>
<p>
Every healthy choice you make is a step toward your goal.
</p>
</div>
</section>
<section id="questionnaire" class="questionnaire-section">
<div class="section-heading">
<span class="section-number">04</span>
<div>
<p class="section-label">PERSONAL HEALTH PROFILE</p>
<h2>HEALTH QUESTIONNAIRE</h2>
</div>
</div>
<p class="section-description">
Answer the questions below so the system can provide
recommendations based on your lifestyle and personal needs.
</p>
<div class="questionnaire-grid">
<div class="question-card">
<label for="activity">
HOW OFTEN DO YOU EXERCISE?
</label>
<select id="activity">
<option value="">Select an answer</option>
<option value="rarely">Rarely</option>
<option value="sometimes">1–2 times a week</option>
<option value="often">3–5 times a week</option>
<option value="daily">Every day</option>
</select>
</div>
<div class="question-card">
<label for="meals">
HOW WOULD YOU DESCRIBE YOUR EATING HABITS?
</label>
<select id="meals">
<option value="">Select an answer</option>
<option value="healthy">Mostly healthy</option>
<option value="mixed">A mix of healthy and unhealthy foods</option>
<option value="unhealthy">Mostly unhealthy</option>
<option value="unsure">I'm not sure</option>
</select>
</div>
<div class="question-card">
<label for="sleep">
HOW MANY HOURS DO YOU USUALLY SLEEP?
</label>
<select id="sleep">
<option value="">Select an answer</option>
<option value="less5">Less than 5 hours</option>
<option value="5to6">5–6 hours</option>
<option value="7to8">7–8 hours</option>
<option value="more8">More than 8 hours</option>
</select>
</div>
<div class="question-card">
<label for="water">
HOW MUCH WATER DO YOU DRINK EACH DAY?
</label>
<select id="water">
<option value="">Select an answer</option>
<option value="low">Less than 4 glasses</option>
<option value="moderate">4–7 glasses</option>
<option value="high">8–10 glasses</option>
<option value="more">More than 10 glasses</option>
</select>
</div>
<div class="question-card">
<label for="screenTime">
HOW MUCH TIME DO YOU SPEND SITTING OR USING A SCREEN?
</label>
<select id="screenTime">
<option value="">Select an answer</option>
<option value="low">Less than 3 hours</option>
<option value="moderate">3–5 hours</option>
<option value="high">6–8 hours</option>
<option value="veryHigh">More than 8 hours</option>
</select>
</div>
<div class="question-card">
<label for="allergies">
DO YOU HAVE ANY KNOWN ALLERGIES?
</label>
<select id="allergies">
<option value="">Select an answer</option>
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="question-card full-width">
<label for="allergyDetails">
IF YES, SPECIFY YOUR ALLERGIES
</label>
<input
type="text"
id="allergyDetails"
placeholder="Enter allergies or N/A"
>
</div>
<div class="question-card full-width">
<label for="medicalCondition">
DO YOU HAVE ANY MEDICAL CONDITIONS THAT MAY AFFECT
YOUR DIET, EXERCISE, OR FITNESS ACTIVITIES?
</label>
<select id="medicalCondition">
<option value="">Select an answer</option>
<option value="no">No</option>
<option value="yes">Yes</option>
<option value="preferNot">Prefer not to say</option>
</select>
</div>
<div class="question-card full-width">
<label for="medicalDetails">
IF YES, SPECIFY IF YOU ARE COMFORTABLE
</label>
<input
type="text"
id="medicalDetails"
placeholder="Enter condition or N/A"
>
</div>
</div>
<button
class="primary-action questionnaire-submit"
onclick="submitQuestionnaire()"
>
SUBMIT QUESTIONNAIRE
</button>
<div class="questionnaire-result-panel">
<div class="status-header">
<span class="status-dot"></span>
PERSONALIZED ANALYSIS
</div>
<p id="questionnaireResult"></p>
</div>
</section>
<section id="progress" class="progress-section">
<div class="section-heading">
<span class="section-number">05</span>
<div>
<p class="section-label">PERFORMANCE MONITORING</p>
<h2>FITNESS PROGRESS</h2>
</div>
</div>
<p class="section-description">
Monitor your BMI records and track your health progress over time.
</p>
<div class="progress-dashboard">
<div class="progress-card">
<p class="progress-label">CURRENT BMI</p>
<p id="currentBMI" class="progress-value">--</p>
</div>
<div class="progress-card">
<p class="progress-label">BMI RECORDS</p>
<p id="recordCount" class="progress-value">0</p>
</div>
<div class="progress-card">
<p class="progress-label">STATUS</p>
<p id="progressStatus" class="progress-value">--</p>
</div>
</div>
<div class="progress-chart-panel">
<div class="status-header">
<span class="status-dot"></span>
BMI HISTORY
</div>
<canvas id="bmiChart"></canvas>
</div>
<div class="progress-actions">
<button
class="primary-action"
onclick="viewProgress()"
>
VIEW PROGRESS
</button>
<button
class="secondary-action"
onclick="clearProgress()"
>
CLEAR PROGRESS
</button>
</div>
<p id="progressResult"></p>
</section>
</main>
<footer>
<p>BMI Fitness Tracker for Students' Health Monitoring</p>
</footer>
<script>
function toggleDashboardMenu() {
const menu = document.getElementById("dashboardMenu");
if (menu) {
menu.classList.toggle("show");
}
}
function closeDashboardMenu() {
const menu = document.getElementById("dashboardMenu");
if (menu) {
menu.classList.remove("show");
}
}
let bmiChartInstance = null;
function calculateBMI() {
const height = document.getElementById("height").value;
const weight = document.getElementById("weight").value;
const age = document.getElementById("age").value;
const sex = document.getElementById("sex").value;
if (height === "" || weight === "" || age === "" || sex === "") {
document.getElementById("bmiResult").textContent =
"Please enter your height, weight, age, and sex.";
return;
}
if (height <= 0 || weight <= 0) {
document.getElementById("bmiResult").textContent =
"Please enter valid height and weight.";
return;
}
const heightInMeters = height / 100;
const bmi = weight / (heightInMeters * heightInMeters);
localStorage.setItem("studentBMI", bmi);
const { error: bmiError } = await supabaseClient
.from("bmi_records")
.insert({
user_id: user.id,
height_cm: Number(height),
weight_kg: Number(weight),
age: Number(age),
sex: sex,
bmi: bmi,
category: category
});
if (bmiError) {
console.error(bmiError);
alert("BMI was calculated, but it could not be saved.");
return;
}
let bmiHistory = JSON.parse(localStorage.getItem("bmiHistory")) || [];
bmiHistory.push({
bmi: bmi,
date: new Date().toLocaleDateString(),
age: age,
sex: sex
});
localStorage.setItem("bmiHistory", JSON.stringify(bmiHistory));
updateGoalProgress();
let category;
if (bmi < 18.5) {
category = "Underweight";
} else if (bmi < 25) {
category = "Normal weight";
} else if (bmi < 30) {
category = "Overweight";
} else {
category = "Obese";
}
document.getElementById("bmiResult").innerHTML =
'<span class="bmi-number">' + bmi.toFixed(2) + '</span>' +
'<span class="bmi-category">' + category + '</span>';
const { error: bmiError } = await supabaseClient
.from("bmi_records")
.insert({
user_id: user.id,
height_cm: Number(height),
weight_kg: Number(weight),
age: Number(age),
sex: sex,
bmi: bmi,
category: category
});
if (bmiError) {
console.error(bmiError);
alert("BMI was calculated, but it could not be saved.");
return;
}
let recommendation;
if (bmi < 18.5) {
recommendation = "Consider eating balanced meals and getting enough nutrients.";
} else if (bmi < 25) {
recommendation = "Keep maintaining a balanced diet and regular physical activity.";
} else if (bmi < 30) {
recommendation = "Consider regular physical activity and healthier food choices.";
} else {
recommendation = "Consider seeking guidance from a health professional for healthy weight management.";
}
document.getElementById("recommendation").textContent = recommendation;
const bmiPanel = document.querySelector(".bmi-status-panel");
if (bmiPanel) {
bmiPanel.classList.add("show-result");
}
}
document.getElementById("allergies").addEventListener("change", function() {
const allergyDetails = document.getElementById("allergyDetails");
if (this.value === "yes") {
allergyDetails.style.display = "block";
} else {
allergyDetails.style.display = "none";
allergyDetails.value = "";
}
});
document.getElementById("medicalCondition").addEventListener("change", function() {
const medicalDetails = document.getElementById("medicalDetails");
if (this.value === "yes") {
medicalDetails.style.display = "block";
} else {
medicalDetails.style.display = "none";
medicalDetails.value = "";
}
});
function submitQuestionnaire() {
const activity = document.getElementById("activity").value;
const meals = document.getElementById("meals").value;
const sleep = document.getElementById("sleep").value;
const water = document.getElementById("water").value;
const screenTime = document.getElementById("screenTime").value;
const allergies = document.getElementById("allergies").value;
const allergyDetails = document.getElementById("allergyDetails").value;
const medicalCondition = document.getElementById("medicalCondition").value;
const medicalDetails = document.getElementById("medicalDetails").value;
if (
activity === "" ||
meals === "" ||
sleep === "" ||
water === "" ||
screenTime === "" ||
allergies === "" ||
medicalCondition === ""
) {
alert("Please answer all questionnaire questions.");
return;
}
let advice = "";
if (allergies === "yes") {
advice += "• Be mindful of your known allergies and avoid possible triggers.<br>";
if (allergyDetails.trim() !== "") {
advice += "• Make sure your health and fitness choices are appropriate for your reported allergies.<br>";
}
}
if (medicalCondition === "yes") {
advice += "• Consider consulting a qualified health professional before making major changes to your diet or exercise routine.<br>";
if (medicalDetails.trim() !== "") {
advice += "• Your reported medical condition should be considered when planning fitness activities.<br>";
}
}
if (medicalCondition === "preferNot") {
advice += "• For health concerns that may affect your fitness activities, consider speaking with a qualified health professional.<br>";
}
if (medicalCondition === "preferNot") {
advice += "• For personalized health concerns, consider speaking with a qualified health professional.<br>";
}
const bmi = parseFloat(localStorage.getItem("studentBMI"));
if (!isNaN(bmi)) {
if (bmi < 18.5) {
advice += "• Your BMI is below the standard adult range. Focus on balanced nutrition and healthy habits.<br>";
} else if (bmi < 25) {
advice += "• Your BMI is within the standard adult range. Continue maintaining healthy habits.<br>";
} else if (bmi < 30) {
advice += "• Your BMI is above the standard adult range. Focus on regular activity and balanced nutrition.<br>";
} else {
advice += "• Your BMI is in the higher range. Consider discussing healthy weight management with a qualified health professional.<br>";
}
}
if (activity === "rarely") {
advice += "Try to include more physical activity in your daily routine.<br>";
} else {
advice += "Keep maintaining your physical activity.<br>";
}
if (meals === "unhealthy") {
advice += "Try to choose more balanced and nutritious meals.<br>";
} else {
advice += "Keep maintaining healthy eating habits.<br>";
}
if (sleep === "less5" || sleep === "5to6") {
advice += "Try to get more consistent and adequate sleep.<br>";
} else {
advice += "Keep maintaining a healthy sleep schedule.<br>";
}
if (water === "low") {
advice += "Try to drink more water throughout the day.<br>";
} else {
advice += "Keep maintaining good water intake.<br>";
}
if (screenTime === "high" || screenTime === "veryHigh") {
advice += "Try to take regular breaks from sitting and screen use.<br>";
} else {
advice += "Keep maintaining a good balance between screen time and physical activity.<br>";
}
document.getElementById("questionnaireResult").innerHTML =
"<h3>Your Personalized Health Recommendations</h3>" + advice;
localStorage.setItem("questionnaireData", JSON.stringify({
activity: activity,
meals: meals,
sleep: sleep,
water: water,
screenTime: screenTime,
allergies: allergies,
allergyDetails: allergyDetails,
medicalCondition: medicalCondition,
medicalDetails: medicalDetails
}));
updateHealthGuide();
updateGoalProgress();
}
function viewProgress() {
const bmiHistory =
JSON.parse(localStorage.getItem("bmiHistory")) || [];
if (bmiHistory.length === 0) {
document.getElementById("progressResult").innerHTML =
"<p>No BMI records yet. Calculate your BMI first.</p>";
const canvas = document.getElementById("bmiChart");
canvas.style.display = "none";
return;
}
const currentBMIElement = document.getElementById("currentBMI");
const recordCountElement = document.getElementById("recordCount");
const progressStatusElement = document.getElementById("progressStatus");
const latestBMI = bmiHistory[bmiHistory.length - 1].bmi;
currentBMIElement.textContent = Number(latestBMI).toFixed(2);
recordCountElement.textContent = bmiHistory.length;
if (latestBMI < 18.5) {
progressStatusElement.textContent = "UNDERWEIGHT";
} else if (latestBMI < 25) {
progressStatusElement.textContent = "NORMAL";
} else if (latestBMI < 30) {
progressStatusElement.textContent = "OVERWEIGHT";
} else {
progressStatusElement.textContent = "OBESE";
}
document.getElementById("progressResult").innerHTML =
"<h3>BMI History</h3>";
const canvas = document.getElementById("bmiChart");
canvas.style.display = "block";
const labels = bmiHistory.map(record => record.date);
const bmiValues = bmiHistory.map(record => record.bmi);
if (bmiChartInstance) {
bmiChartInstance.destroy();
}
bmiChartInstance = new Chart(canvas, {
type: "line",
data: {
labels: labels,
datasets: [{
label: "BMI",
data: bmiValues,
borderColor: "#00eaff",
backgroundColor: "rgba(0, 234, 255, 0.10)",
borderWidth: 3,
pointBackgroundColor: "#00eaff",
pointBorderColor: "#ffffff",
pointBorderWidth: 2,
pointRadius: 5,
pointHoverRadius: 8,
fill: true,
tension: 0.35
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: "#b9faff",
font: {
family: "Arial",
size: 12
}
}
},
tooltip: {
backgroundColor: "#061923",
titleColor: "#00eaff",
bodyColor: "#ffffff",
borderColor: "#00eaff",
borderWidth: 1,
callbacks: {
label: function(context) {
return " BMI: " + context.parsed.y.toFixed(2);
}
}
}
},
scales: {
x: {
ticks: {
color: "#8fcbd3"
},
grid: {
color: "rgba(0, 234, 255, 0.08)"
}
},
y: {
beginAtZero: false,
ticks: {
color: "#8fcbd3"
},
grid: {
color: "rgba(0, 234, 255, 0.08)"
}
}
},
animation: {
duration: 1200,
easing: "easeOutQuart"
}
}
});
}
function clearProgress() {
localStorage.removeItem("bmiHistory");
document.getElementById("progressResult").innerHTML =
"<p>BMI progress history has been cleared.</p>";
}
function saveGoal() {
const goalType = document.getElementById("goalType").value;
const goalTarget = document.getElementById("goalTarget").value.trim();
if (goalType === "" || goalTarget === "") {
alert("Please select a goal and enter your target.");
return;
}
const goalNames = {
exercise: "Exercise Regularly",
water: "Drink More Water",
sleep: "Improve Sleep",
food: "Eat Healthier",
screen: "Reduce Screen Time",
bmi: "Maintain a Healthy BMI"
};
const goal = {
type: goalType,
name: goalNames[goalType],
target: goalTarget
};
localStorage.setItem("fitnessGoal", JSON.stringify(goal));
const unitElement = document.getElementById("dailyGoalUnit");
const valueInput = document.getElementById("dailyGoalValue");
if (unitElement && valueInput) {
const units = {
exercise: "minutes",
water: "glasses",
sleep: "hours",
food: "healthy meals",
screen: "hours",
bmi: "BMI"
};
unitElement.textContent =
"Unit: " + (units[goalType] || "value");
valueInput.placeholder =
"Enter today's " + (units[goalType] || "progress");
}
document.getElementById("goalProgress").textContent = "0%";
document.getElementById("currentGoal").textContent =
goal.name;
document.getElementById("goalMessage").textContent =
"Target: " + goal.target;
let motivation = "";
if (goal.name.toLowerCase().includes("weight")) {
motivation = "Stay consistent. Every healthy choice brings you closer to your goal.";
} else if (goal.name.toLowerCase().includes("exercise")) {
motivation = "Every workout counts. Keep moving and keep building your strength.";
} else if (goal.name.toLowerCase().includes("fitness")) {
motivation = "Small improvements become big results when you stay consistent.";
} else {
motivation = "You have a goal. Take it one step at a time and keep moving forward.";
}
document.getElementById("motivationalMessage").textContent = motivation;
document.getElementById("goalTarget").value = "";
}
function loadSavedGoal() {
const savedGoal = localStorage.getItem("fitnessGoal");
if (!savedGoal) {
return;
}
const goal = JSON.parse(savedGoal);
document.getElementById("currentGoal").textContent =
goal.name;
document.getElementById("goalMessage").textContent =
"Target: " + goal.target;
let motivation = "";
if (goal.name.toLowerCase().includes("weight")) {
motivation =
"Stay consistent. Every healthy choice brings you closer to your goal.";
} else if (goal.name.toLowerCase().includes("exercise")) {
motivation =
"Every workout counts. Keep moving and keep building your strength.";
} else if (goal.name.toLowerCase().includes("fitness")) {
motivation =
"Small improvements become big results when you stay consistent.";
} else {
motivation =
"You have a goal. Take it one step at a time and keep moving forward.";
}
document.getElementById("motivationalMessage").textContent =
motivation;
}
loadSavedGoal();
updateGoalProgress();
window.addEventListener("load", function () {
const bmiHistory =
JSON.parse(localStorage.getItem("bmiHistory")) || [];
if (bmiHistory.length > 0) {
viewProgress();
}
});
function updateHealthGuide() {
const bmi = parseFloat(localStorage.getItem("studentBMI"));
const activity = document.getElementById("activity").value;
const meals = document.getElementById("meals").value;
const sleep = document.getElementById("sleep").value;
const water = document.getElementById("water").value;
const screenTime = document.getElementById("screenTime").value;
const allergies = document.getElementById("allergies").value;
const allergyDetails =
document.getElementById("allergyDetails").value.trim();
const medicalCondition =
document.getElementById("medicalCondition").value;
let foodAdvice =
"Keep maintaining healthy eating habits.";
let exerciseAdvice =
"Keep maintaining your physical activity.";
let routineAdvice =
"Keep maintaining a healthy daily routine.";
let allergyAdvice =
"No allergy information has been provided.";
/* FOOD */
if (meals === "unhealthy") {
foodAdvice =
"Try to choose more balanced and nutritious meals.";
} else {
foodAdvice =
"Keep maintaining healthy eating habits.";
}
if (!isNaN(bmi)) {
if (bmi < 18.5) {
foodAdvice +=
" Focus on balanced nutrition and getting enough nutrients.";
} else if (bmi < 25) {
foodAdvice +=
" Your BMI is within the standard adult range.";
} else if (bmi < 30) {
foodAdvice +=
" Focus on balanced portions and regular healthy eating habits.";
} else {
foodAdvice +=
" Consider discussing healthy weight management with a qualified health professional.";
}
}
/* EXERCISE */
if (activity === "rarely") {
exerciseAdvice =
"Try to include more physical activity in your daily routine.";
} else {
exerciseAdvice =
"Keep maintaining your physical activity.";
}
/* ROUTINE */
if (sleep === "less5" || sleep === "5to6") {
routineAdvice =
"Try to get more consistent and adequate sleep.";
} else {
routineAdvice =
"Keep maintaining a healthy sleep schedule.";
}
if (water === "low") {
routineAdvice +=
" Try to drink more water throughout the day.";
} else {
routineAdvice +=
" Keep maintaining good water intake.";
}
if (screenTime === "high" || screenTime === "veryHigh") {
routineAdvice +=
" Try to take regular breaks from sitting and screen use.";
} else {
routineAdvice +=
" Keep maintaining a good balance between screen time and physical activity.";
}
/* ALLERGIES */
if (allergies === "yes") {
if (allergyDetails !== "") {
allergyAdvice =
"Remember your recorded allergy information: " +
allergyDetails +
". Avoid possible triggers.";
} else {
allergyAdvice =
"Be mindful of your known allergies and avoid possible triggers.";
}
} else if (allergies === "no") {
allergyAdvice =
"No known allergies were reported in your questionnaire.";
}
/* MEDICAL CONDITION */
if (medicalCondition === "yes") {
allergyAdvice +=
" Consider your medical condition when planning diet and exercise.";
} else if (medicalCondition === "preferNot") {
allergyAdvice +=
" For personalized health concerns, consider speaking with a qualified health professional.";
}
/* UPDATE THE FOUR HEALTH GUIDE CARDS */
document.getElementById("foodGuide").textContent =
foodAdvice;
document.getElementById("exerciseGuide").textContent =
exerciseAdvice;
document.getElementById("routineGuide").textContent =
routineAdvice;
document.getElementById("allergyGuide").textContent =
allergyAdvice;
}
const savedQuestionnaire =
localStorage.getItem("questionnaireData");
if (savedQuestionnaire) {
const data = JSON.parse(savedQuestionnaire);
document.getElementById("activity").value = data.activity;
document.getElementById("meals").value = data.meals;
document.getElementById("sleep").value = data.sleep;
document.getElementById("water").value = data.water;
document.getElementById("screenTime").value = data.screenTime;
document.getElementById("allergies").value = data.allergies;
document.getElementById("allergyDetails").value = data.allergyDetails;
document.getElementById("medicalCondition").value = data.medicalCondition;
document.getElementById("medicalDetails").value = data.medicalDetails;
updateHealthGuide();
}
const motivationalMessages = [
"Small steps every day lead to meaningful progress.",
"Consistency is more important than perfection.",
"Your progress is built one healthy choice at a time.",
"Keep going. You are working toward a healthier version of yourself.",
"Every effort counts, even the small ones.",
"Take care of your body and give yourself time to improve.",
"Your goal is worth the effort. Stay consistent.",
"Progress takes time. Keep showing up.",
"Believe in your progress and keep moving forward.",
"A healthier routine starts with one good decision."
];
function showRandomMotivation() {
const messageElement =
document.getElementById("motivationalMessage");
if (!messageElement) {
return;
}
const randomIndex =
Math.floor(Math.random() * motivationalMessages.length);
messageElement.textContent =
motivationalMessages[randomIndex];
}
showRandomMotivation();
function updateGoalProgress() {
const goal = localStorage.getItem("fitnessGoal");
const progressElement = document.getElementById("goalProgress");
if (!goal || !progressElement) {
return;
}
const goalData = JSON.parse(goal);
let progress = 0;
if (goalData.type === "bmi") {
const history =
JSON.parse(localStorage.getItem("bmiHistory")) || [];
if (history.length < 2) {
progressElement.textContent = "0%";
return;
}
const startBMI = Number(history[0].bmi);
const currentBMI =
Number(history[history.length - 1].bmi);
const targetBMI = Number(goalData.target);
if (
isNaN(startBMI) ||
isNaN(currentBMI) ||
isNaN(targetBMI) ||
startBMI === targetBMI
) {
progressElement.textContent = "0%";
return;
}
progress =
((startBMI - currentBMI) /
(startBMI - targetBMI)) * 100;
} else {
const savedQuestionnaire =
localStorage.getItem("questionnaireData");
if (!savedQuestionnaire) {
progressElement.textContent = "0%";
return;
}
const data = JSON.parse(savedQuestionnaire);
if (goalData.type === "exercise") {
const activityProgress = {
rarely: 25,
sometimes: 50,
often: 75,
daily: 100
};
progress =
activityProgress[data.activity] || 0;
} else if (goalData.type === "water") {
const waterProgress = {
low: 25,
moderate: 50,
high: 75,
more: 100
};
progress =
waterProgress[data.water] || 0;
} else if (goalData.type === "sleep") {
const sleepProgress = {
less5: 25,
"5to6": 50,
"7to8": 100,
more8: 75
};
progress =
sleepProgress[data.sleep] || 0;
} else if (goalData.type === "food") {
const foodProgress = {
unhealthy: 25,
mixed: 50,
unsure: 50,
healthy: 100
};
progress =
foodProgress[data.meals] || 0;
} else if (goalData.type === "screen") {
const screenProgress = {
veryHigh: 25,
high: 50,
moderate: 75,
low: 100
};
progress =
screenProgress[data.screenTime] || 0;
}
}
progress = Math.max(0, Math.min(100, progress));
progressElement.textContent =
Math.round(progress) + "%";
}
function recordDailyGoal() {
const goal = localStorage.getItem("fitnessGoal");
const valueInput = document.getElementById("dailyGoalValue");
const message = document.getElementById("dailyGoalMessage");
if (!goal) {
message.textContent = "Please set a goal first.";
return;
}
const value = Number(valueInput.value);
if (isNaN(value) || value < 0) {
message.textContent = "Please enter a valid value.";
return;
}
const goalData = JSON.parse(goal);
const target = Number(goalData.target);
if (isNaN(target) || target <= 0) {
message.textContent = "Please enter a valid goal target.";
return;
}
let progress = (value / target) * 100;
progress = Math.max(0, Math.min(100, progress));
document.getElementById("goalProgress").textContent =
Math.round(progress) + "%";
let dailyRecords =
JSON.parse(localStorage.getItem("dailyGoalRecords")) || [];
const today = new Date().toLocaleDateString();
const existingRecord = dailyRecords.findIndex(function(record) {
return record.date === today &&
record.type === goalData.type;
});
const newRecord = {
type: goalData.type,
value: value,
target: target,
date: today
};
if (existingRecord !== -1) {
dailyRecords[existingRecord] = newRecord;
} else {
dailyRecords.push(newRecord);
}
localStorage.setItem(
"dailyGoalRecords",
JSON.stringify(dailyRecords)
);
message.textContent =
"Today's progress has been recorded.";
displayGoalHistory();
valueInput.value = "";
}
function displayGoalHistory() {
const historyList =
document.getElementById("goalHistoryList");
if (!historyList) {
return;
}
const records =
JSON.parse(localStorage.getItem("dailyGoalRecords")) || [];
if (records.length === 0) {
historyList.textContent = "No goal records yet.";
return;
}
const goal = localStorage.getItem("fitnessGoal");
const goalData = goal ? JSON.parse(goal) : null;
const units = {
exercise: "minutes",
water: "glasses",
sleep: "hours",
food: "healthy meals",
screen: "hours",
bmi: "BMI"
};
const currentType = goalData ? goalData.type : null;
const filteredRecords = records.filter(function(record) {
return record.type === currentType;
});
if (filteredRecords.length === 0) {
historyList.textContent = "No records for this goal yet.";
return;
}
historyList.innerHTML = "";
filteredRecords.slice().reverse().forEach(function(record) {
const item = document.createElement("p");
item.textContent =
record.date +
" — " +
record.value +
" " +
(units[record.type] || "");
historyList.appendChild(item);
});
}
function displayGoalHistory() {
const historyList =
document.getElementById("goalHistoryList");
if (!historyList) {
return;
}
const records =
JSON.parse(localStorage.getItem("dailyGoalRecords")) || [];
if (records.length === 0) {
historyList.textContent = "No goal records yet.";
return;
}
const goal = localStorage.getItem("fitnessGoal");
const goalData = goal ? JSON.parse(goal) : null;
const units = {
exercise: "minutes",
water: "glasses",
sleep: "hours",
food: "healthy meals",
screen: "hours",
bmi: "BMI"
};
const currentType = goalData ? goalData.type : null;
const filteredRecords = records.filter(function(record) {
return record.type === currentType;
});
if (filteredRecords.length === 0) {
historyList.textContent = "No records for this goal yet.";
return;
}
historyList.innerHTML = "";
filteredRecords.slice().reverse().forEach(function(record) {
const item = document.createElement("p");
item.textContent =
record.date +
" — " +
record.value +
" " +
(units[record.type] || "");
historyList.appendChild(item);
});
}
displayGoalHistory();
// Check if the student is logged in
async function checkAuthentication() {
const { data: { session } } = await supabaseClient.auth.getSession();
if (!session) {
window.location.href = "login.html";
}
}
checkAuthentication();
async function logout() {
const { error } = await supabaseClient.auth.signOut();
if (error) {
alert(error.message);
return;
}
window.location.href = "login.html";
}
</script>
</body>
</html>1 views