<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HealthTrack Pro - Your Complete Health & Nutrition Companion</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
:root {
--primary: #4a90e2;
--primary-dark: #357abd;
--secondary: #52d681;
--danger: #ff6b6b;
--warning: #ffd93d;
--dark: #2c3e50;
--light: #ecf0f1;
--white: #ffffff;
--gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
color: var(--dark);
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
header {
background: var(--gradient);
color: white;
padding: 30px 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 1000;
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
.logo {
font-size: 28px;
font-weight: bold;
display: flex;
align-items: center;
gap: 10px;
.logo::before {
content: " ";
font-size: 32px;
nav ul {
list-style: none;
display: flex;
gap: 30px;
nav button {
background: none;
border: 2px solid white;
color: white;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s;
font-size: 16px;
nav button:hover, nav button.active {
background: white;
color: var(--primary-dark);
transform: translateY(-2px);
.section {
display: none;
animation: fadeIn 0.5s;
.section.active {
display: block;
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.card {
background: white;
border-radius: 20px;
padding: 30px;
margin: 20px 0;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
.card-header {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
color: var(--primary-dark);
display: flex;
align-items: center;
gap: 10px;
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 20px 0;
.form-group {
margin-bottom: 20px;
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--dark);
input, select, textarea {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s;
}
input:focus, select:focus, textarea:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
button {
background: var(--primary);
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.3s;
button:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3);
.result-box {
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 15px;
margin-top: 20px;
text-align: center;
font-size: 18px;
display: none;
.result-box.show {
display: block;
animation: slideIn 0.5s;
@keyframes slideIn {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin: 20px 0;
}
.stat-card {
padding: 20px;
border-radius: 15px;
text-align: center;
color: white;
transition: transform 0.3s;
.stat-card:hover {
transform: scale(1.05);
.stat-card.blue { background: linear-gradient(135deg, #667eea, #764ba2); }
.stat-card.green { background: linear-gradient(135deg, #52d681, #3cb371); }
.stat-card.orange { background: linear-gradient(135deg, #ff9a56, #ff6b6b); }
.stat-card.purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.stat-value {
font-size: 32px;
font-weight: bold;
margin: 10px 0;
.stat-label {
font-size: 14px;
opacity: 0.9;
}
.food-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background: #f8f9fa;
border-radius: 10px;
margin: 10px 0;
transition: all 0.3s;
.food-item:hover {
background: #e9ecef;
transform: translateX(5px);
.nutrition-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 10px;
margin-top: 20px;
.nutrition-table th {
background: var(--gradient);
color: white;
padding: 15px;
text-align: left;
border-radius: 10px 0 0 10px;
.nutrition-table th:last-child {
border-radius: 0 10px 10px 0;
.nutrition-table td {
padding: 15px;
background: #f8f9fa;
.nutrition-table tr:hover td {
background: #e9ecef;
.progress-bar {
width: 100%;
height: 30px;
background: #e0e0e0;
border-radius: 15px;
overflow: hidden;
position: relative;
.progress-fill {
height: 100%;
background: var(--gradient);
transition: width 0.5s ease;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
.meal-plan {
background: #f8f9fa;
padding: 20px;
border-radius: 15px;
margin: 15px 0;
border-left: 5px solid var(--primary);
.meal-plan h4 {
color: var(--primary-dark);
margin-bottom: 10px;
}
.tips-list {
list-style: none;
padding: 0;
.tips-list li {
padding: 15px;
margin: 10px 0;
background: linear-gradient(to right, #f8f9fa, white);
border-left: 4px solid var(--secondary);
border-radius: 8px;
transition: all 0.3s;
.tips-list li:hover {
transform: translateX(10px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
.tips-list li::before {
content: "✓ ";
color: var(--secondary);
font-weight: bold;
margin-right: 10px;
}
@media (max-width: 768px) {
.header-content {
flex-direction: column;
gap: 20px;
nav ul {
flex-direction: column;
gap: 10px;
.grid {
grid-template-columns: 1fr;
</style>
</head>
<body>
<header>
<div class="header-content">
<div class="logo">HealthTrack Pro</div>
<nav>
<ul>
<li><button class="nav-btn active" onclick="showSection('dashboard',
this)">Dashboard</button></li>
<li><button class="nav-btn" onclick="showSection('bmi', this)">BMI
Calculator</button></li>
<li><button class="nav-btn" onclick="showSection('calories', this)">Calorie
Counter</button></li>
<li><button class="nav-btn" onclick="showSection('nutrition', this)">Nutrition
Guide</button></li>
<li><button class="nav-btn" onclick="showSection('meal-planner', this)">Meal
Planner</button></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<section id="dashboard" class="section active">
<div class="card">
<div class="card-header">
Your Health Dashboard
</div>
<div class="stats-grid">
<div class="stat-card blue">
<div class="stat-label">Current BMI</div>
<div class="stat-value" id="dashboard-bmi">--</div>
<div class="stat-label">Calculate Now</div>
</div>
<div class="stat-card green">
<div class="stat-label">Daily Calories</div>
<div class="stat-value" id="dashboard-calories">--</div>
<div class="stat-label">Track Today</div>
</div>
<div class="stat-card orange">
<div class="stat-label">Water Intake</div>
<div class="stat-value" id="dashboard-water">0L</div>
<div class="stat-label">Goal: 2.5L</div>
</div>
<div class="stat-card purple">
<div class="stat-label">Weekly Goal</div>
<div class="stat-value">70%</div>
<div class="stat-label">Keep Going!</div>
</div>
</div>
</div>
<div class="grid">
<div class="card">
<div class="card-header">
Daily Health Tips
</div>
<ul class="tips-list">
<li>Drink at least 8 glasses of water daily for optimal hydration</li>
<li>Include 5 servings of fruits and vegetables in your meals</li>
<li>Get 7-9 hours of quality sleep each night</li>
<li>Take a 10-minute walk every 2 hours if you have a desk job</li>
</ul>
</div>
<div class="card">
<div class="card-header">
Progress Tracker
</div>
<div class="form-group">
<label>Weekly Exercise Goal</label>
<div class="progress-bar">
<div class="progress-fill" style="width: 70%;">70% Complete</div>
</div>
</div>
<div class="form-group">
<label>Nutrition Goals</label>
<div class="progress-bar">
<div class="progress-fill" style="width: 85%;">85% Complete</div>
</div>
</div>
<div class="form-group">
<label>Hydration Target</label>
<div class="progress-bar">
<div class="progress-fill" style="width: 60%;">60% Complete</div>
</div>
</div>
</div>
</div>
</section>
<section id="bmi" class="section">
<div class="card">
<div class="card-header">
BMI Calculator
</div>
<div class="grid">
<div>
<div class="form-group">
<label>Height (cm)</label>
<input type="number" id="height" placeholder="Enter your height in cm">
</div>
<div class="form-group">
<label>Weight (kg)</label>
<input type="number" id="weight" placeholder="Enter your weight in kg">
</div>
<div class="form-group">
<label>Age</label>
<input type="number" id="age" placeholder="Enter your age">
</div>
<div class="form-group">
<label>Gender</label>
<select id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<button onclick="calculateBMI()">Calculate BMI</button>
<div id="bmi-result" class="result-box">
<div id="bmi-value"></div>
<div id="bmi-category"></div>
<div id="bmi-advice"></div>
</div>
</div>
<div class="card" style="background: #f8f9fa;">
<h3 style="color: var(--primary-dark); margin-bottom: 20px;">BMI
Categories</h3>
<div class="food-item">
<span>Underweight</span>
<span style="color: #3498db;">BMI < 18.5</span>
</div>
<div class="food-item">
<span>Normal Weight</span>
<span style="color: var(--secondary);">18.5 - 24.9</span>
</div>
<div class="food-item">
<span>Overweight</span>
<span style="color: var(--warning);">25.0 - 29.9</span>
</div>
<div class="food-item">
<span>Obese</span>
<span style="color: var(--danger);">BMI ≥ 30</span>
</div>
</div>
</div>
</div>
</section>
<section id="calories" class="section">
<div class="card">
<div class="card-header">
Daily Calorie Counter
</div>
<div class="grid">
<div>
<h3 style="color: var(--primary-dark); margin-bottom: 20px;">Add Food
Item</h3>
<div class="form-group">
<label>Food Name</label>
<input type="text" id="food-name" placeholder="e.g., Apple, Rice, Chicken">
</div>
<div class="form-group">
<label>Calories</label>
<input type="number" id="food-calories" placeholder="Enter calories">
</div>
<div class="form-group">
<label>Meal Type</label>
<select id="meal-type">
<option value="breakfast">Breakfast</option>
<option value="lunch">Lunch</option>
<option value="dinner">Dinner</option>
<option value="snack">Snack</option>
</select>
</div>
<button onclick="addFood()">Add Food</button>
<div class="result-box show" style="margin-top: 20px;">
<div>Total Calories Today</div>
<div class="stat-value" id="total-calories">0</div>
<div id="calorie-status">Start tracking your meals!</div>
</div>
</div>
<div>
<h3 style="color: var(--primary-dark); margin-bottom: 20px;">Today's
Meals</h3>
<div id="food-list">
<p style="color: #999; text-align: center;">No meals added yet</p>
</div>
</div>
</div>
<div class="card" style="margin-top: 20px; background: #f8f9fa;">
<h3 style="color: var(--primary-dark); margin-bottom: 20px;">Common Foods
Calorie Reference</h3>
<table class="nutrition-table">
<thead>
<tr>
<th>Food Item</th>
<th>Serving Size</th>
<th>Calories</th>
<th>Protein (g)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>1 medium</td>
<td>95</td>
<td>0.5</td>
</tr>
<tr>
<td>Banana</td>
<td>1 medium</td>
<td>105</td>
<td>1.3</td>
</tr>
<tr>
<td>Chicken Breast</td>
<td>100g</td>
<td>165</td>
<td>31</td>
</tr>
<tr>
<td>Brown Rice</td>
<td>1 cup cooked</td>
<td>216</td>
<td>5</td>
</tr>
<tr>
<td>Eggs</td>
<td>1 large</td>
<td>78</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
</div>
[16/10, 11:39 am] Yash Gadekar: function calculateBMI() {
const height = parseFloat(document.getElementById('height').value);
const weight = parseFloat(document.getElementById('weight').value);
const age = parseFloat(document.getElementById('age').value);
const gender = document.getElementById('gender').value;
if (!height || !weight || !age) {
alert('Please fill in all fields');
return;
// Calculate BMI
const heightInMeters = height / 100;
const bmi = weight / (heightInMeters * heightInMeters);
const bmiRounded = bmi.toFixed(1);
// Determine category
let category, advice, color;
if (bmi < 18.5) {
category = "Underweight";
advice = "Consider consulting a nutritionist to develop a healthy weight gain plan.";
color = "#3498db";
} else if (bmi < 25) {
category = "Normal Weight";
advice = "Great! Maintain your healthy lifestyle with a balanced diet and regular
exercise.";
color = "#52d681";
} else if (bmi < 30) {
category = "Overweight";
advice = "Consider increasing physical activity and making dietary adjustments.";
color = "#ffd93d";
} else {
category = "Obese";
advice = "It's recommended to consult with a healthcare provider for a personalized
plan.";
color = "#ff6b6b";
// Display results
const resultBox = document.getElementById('bmi-result');
resultBox.classList.add('show');
resultBox.style.background = color; // Use the color to style the result box
document.getElementById('bmi-value').textContent = `Your BMI is ${bmiRounded}`;
document.getElementById('bmi-category').textContent = `Category: ${category}`;
document.getElementById('bmi-advice').textContent = advice;
// Update dashboard
document.getElementById('dashboard-bmi').textContent = bmiRounded;
