Scribd
Upload
36 views

CSS Word Project

CSS micro project Abt Health Wellness

Uploaded by

pratik.ks1973
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
36 views

CSS Word Project

CSS micro project Abt Health Wellness

Uploaded by

pratik.ks1973
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 39

BHARATI VIDYAPEETH Institute of Technology (Polytechnic),

Navi Mumbai
(ACADEMIC YEAR: -2024-2025)
(MICRO PROJECT)

CSS: Client Side Scripting


PROGRAM: - CM5I COURSE AND CODE: -CSS (22519)

TOPIC: - Health & Wellness Platform


SUBMITTED BY

NAME ROLL NO
KRINJAL GAWADE
3350
PRATIK SINGH 3359

ATHRVA WAGHMARE 3364


1. Main Page:

 A clean, professional black-and-white interface.


 A navigation bar linking to key sections: Health Conditions, Discover, Plan,
and Connect, each with a dropdown menu.
 Centered welcome text and tools like the Diet Calories Calculator, providing
user interactivity.

2. Nav Bar:

 A responsive, horizontal menu with dropdowns under Connect offering options


like Forum, Support, and Feedback.
 Logo placement with smooth hover effects for dropdowns.

3. Health Conditions Page:

 Detailed information about body fat, face fat, and the general physique of Indian
individuals.
 Practical tips for managing and reducing fat, and promoting overall well-being.
 A Diet Calories Calculator where users can input their weight and height for
custom diet recommendations.

4. Discover Page:

 A knowledge hub offering articles, tips, and fitness trends, tailored to


improving users' wellness journeys.

5. Plan Page:

 Personalized plans like Weight Loss Plan, Muscle Gain Plan, and Wellness
Plan.
 Users input their details to receive custom diet and workout routines, including
veg and non-veg options.
 Interactive start buttons initiate custom plans.

6. Interactive Features:

 Dropdown menus and hover effects for enhanced user engagement.


 Images with hover-over tooltips for displaying information.

7. Diet Calories Calculator:

 Integrated into the Health Conditions page for easy user access.
 Provides personalized diet plans based on users' weight and height.

8. Muscle Gain and Wellness Plans:

 Custom plans introduced under the Plan section for those looking to gain
muscle or focus on overall wellness.

Technologies Used:
1. HTML:

 For structuring web pages, including elements like headings, forms, and
the navigation bar.

2. CSS:

 To style the entire website, providing the black-and-white theme, layout,


and interactive design elements like hover effects and dropdown menus.

3. JavaScript:

 For adding dynamic functionalities, such as the Diet Calories


Calculator, dropdown interactions, hover effects, and managing cookies
to store user preferences.

4. Cookies:

 Implemented through JavaScript to save user input (like weight and


height) for a personalized experience when users revisit the site.

Work Division:

Pratik Singh:

 Main Page & Navigation Bar:


o Design and structure the main page layout using HTML and CSS.
o Create the navigation bar with links to all key sections.
o Implement the Diet Calories Calculator on the Health Conditions page.

Krinjal Gawade:

 Health Conditions Page:


o Develop the content for the Health Conditions page, including information
about body fat and face fat.
o Implement CSS styles for the Health Conditions page to match the website
theme.
o Add the Diet Calories Calculator logic and integrate it into the page.

Athrva Waghmare:

 Discover Page & Plan Page:


o Create the layout and content for the Discover page, including articles and
fitness tips.
o Structure the Plan page with options for personalized plans (Weight Loss,
Muscle Gain, and Wellness).
o Implement JavaScript functionality for the interactive elements on both pages.
CODES (OUTPUTS & INPUTS):-

1)LOGIN PAGE FOR NEW USER: After submit we redirect to


main page.

(CODES):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login / Sign Up</title>

<!-- Internal CSS for black and white theme -->


<style>
/* Black and white theme */
body {
font-family: Arial, sans-serif;
background-color: black;
color: white;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
background-color: #fff;
color: black;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
width: 350px;
text-align: center;
}

h1 {
margin-bottom: 20px;
font-size: 2em;
color: #3F51B5;
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
width: 100%;
padding: 10px;
background-color: #3F51B5;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.1em;
}

button:hover {
background-color: #303F9F;
}

.redirect-message {
margin-top: 20px;
font-size: 1.1em;
}
/* Footer Styling */
footer {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
color: gray;
font-size: 0.9em;
}
</style>
</head>
<body>

<div class="container">
<h1>Login / Sign Up</h1>

<!-- Login Form -->


<form id="login-form">
<input type="text" id="username" placeholder="Enter your username" required>
<input type="password" id="password" placeholder="Enter your password"
required>
<button type="submit">Submit</button>
</form>

<div class="redirect-message" id="redirect-message"></div>


</div>

<footer>
<p>&copy; 2024 Your Company. All rights reserved.</p>
</footer>

<!-- Internal JavaScript -->


<script>
// JavaScript logic to handle form submission and redirect to the main page
document.getElementById("login-form").addEventListener("submit", function(event)
{
event.preventDefault();

const username = document.getElementById("username").value;


const password = document.getElementById("password").value;

if (username && password) {


document.getElementById("redirect-message").innerHTML = "Logging in, please
wait...";

// Simulate redirect after a short delay (2 seconds)


setTimeout(function() {
window.location.href = "main.html"; // Redirect to main.html
}, 2000);
} else {
document.getElementById("redirect-message").innerHTML = "Please enter both
username and password!";
}
});
</script>
</body>
</html>
2)MAIN PAGE:The Main Page features a sleek black-and-white
design with a top navigation bar linking to Health Conditions,
Discover, Plan, and Connect. A bold welcome message is centered,
with a Diet Calories Calculator for user interaction. Clean visuals and
hover effects enhance the professional feel.

(CODES):
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Health & Wellness Platform</title>

<link rel="icon" href="/Retro_Vintage-removebg-preview (1).png" type="image/x-


icon">

<style>
body {

background-color: black;

color: white;

margin: 0;

font-family: Arial, sans-serif;

line-height: 1.6;

/* Navigation Bar */

.navbar {

display: flex;

align-items: center;

background-color: #222;

padding: 15px;

.navbar img {

height: 80px;

margin-right: 20px;

.navbar ul {

list-style: none;

display: flex;

margin: 0;
padding: 0;

.navbar ul li {

position: relative;

margin: 0 15px;

.navbar ul li a {

color: white;

text-decoration: none;

font-size: 1.1em;

transition: color 0.3s;

.navbar ul li a:hover {

color: #1e90ff;

/* Dropdown Menu */

.dropdown {

display: none;

position: absolute;

background-color: #333;

min-width: 160px;
border-radius: 5px;

z-index: 1;

.dropdown a {

color: white;

padding: 10px;

text-decoration: none;

display: block;

.dropdown a:hover {

background-color: #444;

/* Show dropdown on hover */

li:hover .dropdown {

display: block;

/* Main Content */

.main-content {

text-align: center;

padding: 50px 20px;

}
h1 {

font-size: 3em;

margin-bottom: 20px;

p{

font-size: 1.2em;

max-width: 800px;

margin: 0 auto;

line-height: 1.5;

/* Image Gallery */

.image-gallery {

display: flex;

justify-content: center;

flex-wrap: wrap;

margin: 20px 0;

.image-container {

position: relative;

width: 250px; /* Making it smaller for circular effect */

height: 250px;
margin: 10px;

/* Circular images */

.image-gallery img {

width: 100%;

height: 100%;

border-radius: 50%; /* Makes the image circular */

object-fit: cover;

box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);

transition: transform 0.3s;

.image-container img:hover {

transform: scale(1.05);

/* Hidden info on image */

.image-info {

display: flex;

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 50px;
justify-content: center;

align-items: center;

background-color: rgba(0, 0, 0, 0.7);

color: white;

text-align: center;

padding: 10px;

border-radius: 0 0 50% 50%; /* Matches the bottom of the circle */

opacity: 0;

transition: opacity 0.3s;

/* Show info on hover */

.image-container:hover .image-info {

opacity: 1;

/* Footer */

footer {

text-align: center;

padding: 20px;

background-color: #222;

position: relative;

bottom: 0;

width: 100%;

}
footer p {

color: #aaa;

</style>

</head>

<body>

<!-- Navigation Bar -->

<nav class="navbar">

<img src="/Retro_Vintage-removebg-preview (1).png" alt="Logo" /> <!-- Placeholder


logo -->

<ul>

<li><a href="nav/Health Conditions.html">Health Conditions</a></li>

<li><a href="nav/Discover.html">Discover</a></li>

<li><a href="nav/plan.html">Plan</a></li>

<li>

<a href="#connect">Connect</a>

<div class="dropdown">

<a href="#forum">Forum</a>

<a href="#support">Support</a>

<a href="#feedback">Feedback</a>

</div>

</li>

</ul>

</nav>
<!-- Main Content -->

<div class="main-content">

<h1>Welcome to the Health & Wellness Platform</h1>

<p>

Your one-stop solution for tracking your health, staying active, and connecting with
like-minded individuals. Discover personalized plans, get nutrition advice, and take
control of your well-being.

</p>

<!-- Image Gallery -->

<div class="image-gallery">

<div class="image-container">

<img src="/Firefly nutrition 67931.jpg" alt="Nutrition">

<div class="image-info">Nutrition: Find healthy diet plans that fit your


lifestyle.</div>

</div>

<div class="image-container">

<img src="/Firefly exercise 28577.jpg" alt="Exercise">

<div class="image-info">Exercise: Explore tailored workout programs to stay


active.</div>

</div>

<div class="image-container">

<img src="/Firefly wellness 28577.jpg" alt="Wellness">

<div class="image-info">Wellness: Achieve mental and physical balance for


holistic health.</div>

</div>
<div class="image-container">

<img src="/Firefly community all over the world 3782.jpg" alt="Community">

<div class="image-info">Community: Join and connect with others on their


wellness journey.</div>

</div>

</div>

</div>

<!-- Footer -->

<footer>

<p>&copy; 2024 Health & Wellness Platform. All rights reserved.</p>

</footer>

</body>

</html>

3)Health Conditions: The Health Conditions page provides


essential information about common body-related concerns, focusing on
topics like body fat, face fat, and the general physique of individuals,
particularly tailored to the Indian body type. It includes practical tips for
managing and reducing fat, maintaining a healthy balance, and improving
overall well-being. The page also features a Diet Calories Calculator at
the top, allowing users to enter their weight and height to receive
personalized diet plans, helping them make informed choices for healthier
living.
(CODES):

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Health Conditions</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f5f5f5;

margin: 0;

padding: 20px;

h1, h2 {

color: #2c3e50;

.section {

background-color: #fff;

padding: 20px;

margin-bottom: 40px;

border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

/* Calculator Form */

.calculator {

max-width: 600px;

margin: 0 auto;

padding: 20px;

background-color: #fff;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

.calculator input {

width: 100%;

padding: 10px;

margin: 10px 0;

border-radius: 5px;

border: 1px solid #ccc;

.calculator button {

width: 100%;

padding: 10px;

background-color: #e74c3c;
color: white;

border: none;

border-radius: 5px;

cursor: pointer;

.calculator button:hover {

background-color: #c0392b;

.result {

margin-top: 20px;

font-size: 1.2em;

color: #2ecc71;

.tips-section {

margin-bottom: 40px;

.tips-section p {

line-height: 1.6;

</style>

</head>
<body>

<h1>Health Conditions</h1>

<!-- Diet Calories Calculator -->

<div class="section">

<h2>Diet Calories Calculator</h2>

<div class="calculator">

<label for="weight">Enter your weight (kg):</label>

<input type="number" id="weight" placeholder="Weight in kg">

<label for="height">Enter your height (cm):</label>

<input type="number" id="height" placeholder="Height in cm">

<label for="activity-level">Activity Level:</label>

<select id="activity-level">

<option value="1.2">Sedentary (little or no exercise)</option>

<option value="1.375">Lightly active (light exercise/sports 1-3


days/week)</option>

<option value="1.55">Moderately active (moderate exercise/sports 3-5


days/week)</option>

<option value="1.725">Very active (hard exercise/sports 6-7 days a


week)</option>

<option value="1.9">Super active (very hard exercise, physical job or training


twice a day)</option>

</select>
<button onclick="calculateCalories()">Calculate Calories</button>

<div class="result" id="calories-result"></div>

</div>

</div>

<!-- Body Fat Information -->

<div class="section tips-section">

<h2>Understanding Body Fat</h2>

<p>Body fat is an essential component of the human body, necessary for maintaining
energy, supporting cell function, and insulating the body. However, excessive body fat
can lead to various health problems, such as obesity, heart disease, and diabetes. The
body fat percentage that is considered healthy varies by age and gender, but maintaining
a balanced diet and active lifestyle is crucial for overall health.</p>

</div>

<!-- Face Fat Tips -->

<div class="section tips-section">

<h2>Tips for Reducing Face Fat</h2>

<p>Facial fat is often a concern for many individuals, particularly as they age or gain
weight. While you can't target fat loss specifically from your face, engaging in regular
cardiovascular exercises, eating a healthy diet, and staying hydrated can help reduce
overall body fat, which will also lead to less facial fat.</p>

</div>

<script>

function calculateCalories() {

const weight = document.getElementById('weight').value;

const height = document.getElementById('height').value;


const activityLevel = document.getElementById('activity-level').value;

if (weight && height && activityLevel) {

// Harris-Benedict equation for Basal Metabolic Rate (BMR)

const bmr = 10 * weight + 6.25 * height - 5 * 25 + 5; // assuming age 25

const totalCalories = bmr * activityLevel;

document.getElementById('calories-result').innerText = `You need approximately


${Math.round(totalCalories)} calories per day.`;

} else {

document.getElementById('calories-result').innerText = 'Please fill out all fields.';

</script>

</body>

</html>

Discover: The Discover page is designed to help users explore


various health and fitness-related content. It features articles, tips, and
insights on improving wellness, staying fit, and achieving a balanced
lifestyle. The page encourages users to learn more about different fitness
trends, diet plans, and exercise routines tailored to their needs. With bold
headings and easy navigation, the page acts as a knowledge hub where
users can discover new ways to enhance their health journey.
(CODES):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discover</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
}

/* Styling for H1 - Making it bigger and bold */


h1 {
font-size: 3.5em; /* Increase font size */
font-weight: bold; /* Make the text bold */
color: #2c3e50; /* Optional: Change color if needed */
text-align: center; /* Center align the heading */
margin-bottom: 20px;
}

<h1>Discover</h1>
<p>Welcome to the Discover page. Here, you can explore various aspects related to
health, fitness, and wellness.</p>

h1 {
text-align: center;
color: #333;
margin-bottom: 40px;
}

.section {
margin-bottom: 40px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.section h2 {
color: #2c3e50;
}
.section p {
line-height: 1.6;
color: #555;
}

.discover-image {
max-width: 100%;
border-radius: 8px;
margin-bottom: 20px;
}

/* Button */
.learn-more-btn {
background-color: #e74c3c;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}

.learn-more-btn:hover {
background-color: #c0392b;
}

/* Grid Layout for Featured Workouts */


.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}

.grid-item {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 15px;
text-align: center;
}

.grid-item h3 {
margin-top: 0;
}

</style>
</head>
<body>

<h1>Discover</h1>

<!-- Trending Health Topics -->


<div class="section">
<h2>Trending Health Topics</h2>
<p>Stay updated with the latest health and wellness trends. Explore different ways to
improve your well-being through new diets, workout regimes, and lifestyle habits.</p>

<a href="#" class="learn-more-btn">Learn More</a>


</div>

<!-- Featured Workouts -->


<div class="section">
<h2>Featured Workouts</h2>
<div class="grid-container">
<div class="grid-item">
<h3>Yoga for Beginners</h3>
<p>Start your journey into mindfulness with easy-to-follow yoga routines.</p>
<a href="#" class="learn-more-btn">Start Yoga</a>
</div>
<div class="grid-item">
<h3>HIIT Workouts</h3>
<p>Get fit fast with high-intensity interval training for all levels.</p>
<a href="#" class="learn-more-btn">Try HIIT</a>
</div>
<div class="grid-item">
<h3>Strength Training</h3>
<p>Build muscle and strength with targeted exercises for your entire body.</p>
<a href="#" class="learn-more-btn">Get Strong</a>
</div>
</div>
</div>

<!-- Nutrition Advice -->


<div class="section">
<h2>Nutrition Advice</h2>
<p>Fuel your body the right way! Discover balanced diet plans and nutrition tips that
help you reach your health goals. From superfoods to macronutrients, we've got you
covered.</p>
<a href="#" class="learn-more-btn">Learn About Nutrition</a>
</div>

<!-- Healthy Living Tips -->


<div class="section">
<h2>Healthy Living Tips</h2>
<p>Improve your overall well-being with simple, actionable tips for staying healthy.
Learn how to manage stress, sleep better, and maintain a positive mental attitude.</p>

<a href="#" class="learn-more-btn">Discover Tips</a>


</div>

</body>
</html>

Plan: The Plan page offers personalized fitness and wellness plans
tailored to users' needs. It includes options like a Weight Loss Plan,
Muscle Gain Plan, and a Wellness Plan, each designed to guide users
toward their specific goals. By entering basic information like weight and
height, users can receive custom diet plans (both veg and non-veg) and
exercise routines. The page is interactive, allowing users to start their
plans with a simple click, ensuring a smooth and guided experience
toward achieving their fitness objectives.
(CODES):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plan Your Journey</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
}

h1 {
font-size: 3.5em;
font-weight: bold;
color: #2c3e50;
text-align: center;
margin-bottom: 20px;
}

.section {
background-color: #fff;
padding: 20px;
margin-bottom: 40px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
font-size: 2em;
color: #34495e;
margin-bottom: 10px;
}

.button {
background-color: #e74c3c;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 1em;
cursor: pointer;
text-align: center;
}

.button:hover {
background-color: #c0392b;
}

.plan-options {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.plan-card {
background-color: #fff;
padding: 20px;
width: 30%;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

.plan-card h3 {
font-size: 1.5em;
color: #2c3e50;
}

.plan-card p {
margin: 10px 0;
}

@media (max-width: 768px) {


.plan-card {
width: 100%;
}
}

.calculator-section {
display: none;
margin-top: 20px;
background-color: #ecf0f1;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.calculator-section input {
margin-bottom: 10px;
padding: 8px;
width: 100%;
}

.diet-section {
margin-top: 20px;
display: none;
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
}

.error {
color: red;
}
</style>
</head>
<body>

<h1>Plan Your Journey</h1>

<div class="section">
<h2>Choose a Plan</h2>
<div class="plan-options">
<!-- Weight Loss Plan -->
<div class="plan-card">
<h3>Weight Loss Plan</h3>
<p>A structured plan to help you lose weight through balanced meals and daily
workouts.</p>
<button class="button" onclick="showCalculator('weightLoss')">Start
Plan</button>
</div>

<!-- Muscle Gain Plan -->


<div class="plan-card">
<h3>Muscle Gain Plan</h3>
<p>A plan focused on building muscle mass with high-protein meals and strength
training.</p>
<button class="button" onclick="showCalculator('muscleGain')">Start
Plan</button>
</div>

<!-- Wellness Plan -->


<div class="plan-card">
<h3>Wellness Plan</h3>
<p>A holistic plan for mental and physical wellness, including mindfulness
exercises and healthy eating.</p>
<button class="button" onclick="showCalculator('wellness')">Start
Plan</button>
</div>
</div>
</div>

<!-- Calculator Section -->


<div class="calculator-section" id="calculator-section">
<h2>Enter Your Details</h2>
<input type="number" id="weight" placeholder="Enter your weight (kg)" required />
<input type="number" id="height" placeholder="Enter your height (cm)" required />
<label>
<input type="radio" name="diet" value="veg" required> Vegetarian
</label>
<label>
<input type="radio" name="diet" value="non-veg" required> Non-Vegetarian
</label>
<button class="button" onclick="calculateDiet()">Submit</button>
<p class="error" id="error-message"></p> <!-- Error Message -->
</div>

<!-- Diet Recommendation Section -->


<div class="diet-section" id="diet-section">
<h2>Your Recommended Diet</h2>
<p id="diet-info"></p>
</div>

<script>
let currentPlan = '';

// Show Calculator Section based on selected plan


function showCalculator(planType) {
currentPlan = planType;
document.getElementById('calculator-section').style.display = 'block';
document.getElementById('diet-section').style.display = 'none'; // Hide diet info
initially
}

// Validate input and show error message if inputs are missing


function calculateDiet() {
var weight = document.getElementById('weight').value;
var height = document.getElementById('height').value;
var dietType = document.querySelector('input[name="diet"]:checked');

// Validate inputs
if (!weight || !height || !dietType) {
document.getElementById('error-message').innerText = "Please fill out all
fields!";
return;
}

// Reset error message if inputs are valid


document.getElementById('error-message').innerText = "";

dietType = dietType.value;

var dietInfo = '';

if (currentPlan === 'weightLoss') {


dietInfo = weightLossDiet(weight, height, dietType);
} else if (currentPlan === 'muscleGain') {
dietInfo = muscleGainDiet(weight, height, dietType);
} else if (currentPlan === 'wellness') {
dietInfo = wellnessDiet(weight, height, dietType);
}
document.getElementById('diet-info').innerHTML = dietInfo;
document.getElementById('diet-section').style.display = 'block';
}

// Diet recommendations for Weight Loss


function weightLossDiet(weight, height, dietType) {
if (dietType === 'veg') {
return 'For weight loss (Vegetarian), consume low-calorie, nutrient-dense foods
such as vegetables, pulses, fruits, and whole grains. Avoid processed foods and control
portion sizes.';
} else {
return 'For weight loss (Non-Vegetarian), focus on lean proteins like chicken, fish,
and eggs. Combine with vegetables, and reduce carbohydrate intake.';
}
}

// Diet recommendations for Muscle Gain


function muscleGainDiet(weight, height, dietType) {
if (dietType === 'veg') {
return 'For muscle gain (Vegetarian), consume a high-protein diet with legumes,
beans, tofu, nuts, and whole grains. Incorporate healthy fats from seeds and oils.';
} else {
return 'For muscle gain (Non-Vegetarian), eat high-protein foods such as chicken,
turkey, fish, and eggs. Add carbohydrates like rice and oats for energy and healthy fats.';
}
}

// Diet recommendations for Wellness


function wellnessDiet(weight, height, dietType) {
if (dietType === 'veg') {
return 'For overall wellness (Vegetarian), focus on balanced meals with fruits,
vegetables, pulses, and whole grains. Include mindfulness and hydration in your routine.';
} else {
return 'For overall wellness (Non-Vegetarian), eat lean proteins like fish, eggs,
combined with fresh vegetables and whole grains for optimal health.';
}
}
</script>

</body>
</html>

You might also like