Rcm body scanner app #591
Description
<title>RCM Health Report & Product Recommendation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
color: #333;
line-height: 1.6;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
background-color: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
header {
background: linear-gradient(to right, #2c3e50, #3498db);
color: white;
padding: 25px 30px;
text-align: center;
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.tagline {
font-size: 1.1rem;
opacity: 0.9;
}
.app-description {
padding: 20px 30px;
background-color: #f8f9fa;
border-bottom: 1px solid #eaeaea;
text-align: center;
}
.tabs {
display: flex;
background-color: #2c3e50;
}
.tab-button {
flex: 1;
background: none;
border: none;
color: white;
padding: 18px 10px;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.tab-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.tab-button.active {
background-color: #3498db;
font-weight: bold;
}
.tab-content {
display: none;
padding: 30px;
}
.tab-content.active {
display: block;
}
.form-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-bottom: 30px;
}
.form-group {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 8px;
font-weight: 600;
color: #2c3e50;
display: flex;
align-items: center;
gap: 8px;
}
input, select {
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
transition: border 0.3s;
}
input:focus, select:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
.gender-options {
display: flex;
gap: 20px;
margin-top: 5px;
}
.gender-option {
display: flex;
align-items: center;
gap: 8px;
}
.btn {
background: linear-gradient(to right, #3498db, #2980b9);
color: white;
border: none;
padding: 15px 30px;
font-size: 1.1rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 30px auto 0;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}
.btn:active {
transform: translateY(0);
}
.report-container {
background-color: #f8f9fa;
border-radius: 10px;
padding: 25px;
margin-top: 30px;
border-left: 5px solid #3498db;
}
.report-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #eaeaea;
}
.report-title {
font-size: 1.8rem;
color: #2c3e50;
}
.report-date {
color: #7f8c8d;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.metric-card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.3s;
border-top: 4px solid #3498db;
}
.metric-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.metric-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.metric-name {
font-weight: 700;
font-size: 1.1rem;
color: #2c3e50;
}
.metric-value {
font-size: 1.5rem;
font-weight: 700;
color: #2c3e50;
}
.metric-range {
font-size: 0.9rem;
color: #7f8c8d;
margin-top: 5px;
}
.metric-status {
padding: 5px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-top: 10px;
display: inline-block;
}
.status-good {
background-color: #d5f4e6;
color: #27ae60;
}
.status-warning {
background-color: #fef9e7;
color: #f39c12;
}
.status-poor {
background-color: #fdeaea;
color: #e74c3c;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-top: 30px;
}
.product-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s;
border: 1px solid #eaeaea;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.product-header {
padding: 20px;
background: linear-gradient(to right, #3498db, #2c3e50);
color: white;
}
.product-name {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 5px;
}
.product-body {
padding: 20px;
}
.product-section {
margin-bottom: 20px;
}
.product-section h4 {
color: #2c3e50;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.product-list {
list-style-type: none;
}
.product-list li {
padding: 8px 0;
border-bottom: 1px dotted #eee;
display: flex;
align-items: flex-start;
gap: 10px;
}
.product-list li:last-child {
border-bottom: none;
}
.icon-good {
color: #27ae60;
}
.icon-not {
color: #e74c3c;
}
.recommended-tag {
background-color: #e74c3c;
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
display: inline-block;
margin-top: 10px;
}
.summary-table {
width: 100%;
border-collapse: collapse;
margin-top: 30px;
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.summary-table th {
background-color: #3498db;
color: white;
padding: 15px;
text-align: left;
}
.summary-table td {
padding: 15px;
border-bottom: 1px solid #eee;
}
.summary-table tr:last-child td {
border-bottom: none;
}
.summary-table tr:hover {
background-color: #f8f9fa;
}
footer {
text-align: center;
padding: 25px;
color: #7f8c8d;
border-top: 1px solid #eaeaea;
margin-top: 30px;
}
@media (max-width: 768px) {
.form-container {
grid-template-columns: 1fr;
}
.metrics-grid, .products-grid {
grid-template-columns: 1fr;
}
.tab-button span {
display: none;
}
h1 {
font-size: 2rem;
}
}
</style>
RCM Health Report Analyzer
Personalized Body Analysis & Nutricharge Product Recommendations
<div class="app-description">
<p>Enter your body composition details to generate a comprehensive health report and receive personalized product recommendations from the Nutricharge range.</p>
</div>
<div class="tabs">
<button class="tab-button active" data-tab="tab1">
<i class="fas fa-user-edit"></i>
<span>Personal Details</span>
</button>
<button class="tab-button" data-tab="tab2">
<i class="fas fa-chart-line"></i>
<span>Health Report</span>
</button>
<button class="tab-button" data-tab="tab3">
<i class="fas fa-capsules"></i>
<span>Product Recommendations</span>
</button>
</div>
<!-- Tab 1: Personal Details Form -->
<div id="tab1" class="tab-content active">
<h2>Enter Your Health Metrics</h2>
<p>Fill in your body composition details to generate a personalized health report.</p>
<div class="form-container">
<div class="form-group">
<label for="name"><i class="fas fa-user"></i> Full Name</label>
<input type="text" id="name" placeholder="Enter your full name">
</div>
<div class="form-group">
<label><i class="fas fa-venus-mars"></i> Gender</label>
<div class="gender-options">
<div class="gender-option">
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male" style="margin-bottom: 0;">Male</label>
</div>
<div class="gender-option">
<input type="radio" id="female" name="gender" value="female">
<label for="female" style="margin-bottom: 0;">Female</label>
</div>
</div>
</div>
<div class="form-group">
<label for="age"><i class="fas fa-birthday-cake"></i> Age</label>
<input type="number" id="age" min="1" max="120" placeholder="Enter your age">
</div>
<div class="form-group">
<label for="height"><i class="fas fa-ruler-vertical"></i> Height (cm)</label>
<input type="number" id="height" min="50" max="250" placeholder="Height in centimeters">
</div>
<div class="form-group">
<label for="weight"><i class="fas fa-weight"></i> Weight (kg)</label>
<input type="number" id="weight" min="10" max="300" step="0.1" placeholder="Weight in kilograms">
</div>
<div class="form-group">
<label for="bodyFat"><i class="fas fa-percentage"></i> Body Fat %</label>
<input type="number" id="bodyFat" min="1" max="60" step="0.1" placeholder="Body fat percentage">
</div>
<div class="form-group">
<label for="water"><i class="fas fa-tint"></i> Water %</label>
<input type="number" id="water" min="30" max="80" step="0.1" placeholder="Body water percentage">
</div>
<div class="form-group">
<label for="muscle"><i class="fas fa-dumbbell"></i> Muscle Mass (kg)</label>
<input type="number" id="muscle" min="10" max="150" step="0.1" placeholder="Muscle mass in kg">
</div>
<div class="form-group">
<label for="bone"><i class="fas fa-bone"></i> Bone Mass (kg)</label>
<input type="number" id="bone" min="0.5" max="10" step="0.1" placeholder="Bone mass in kg">
</div>
<div class="form-group">
<label for="visceral"><i class="fas fa-layer-group"></i> Visceral Fat Level</label>
<input type="number" id="visceral" min="1" max="30" placeholder="Visceral fat level (1-30)">
</div>
<div class="form-group">
<label for="bmr"><i class="fas fa-fire"></i> BMR (Calories)</label>
<input type="number" id="bmr" min="800" max="4000" placeholder="Basal Metabolic Rate">
</div>
<div class="form-group">
<label for="metabolicAge"><i class="fas fa-clock"></i> Metabolic Age</label>
<input type="number" id="metabolicAge" min="10" max="120" placeholder="Metabolic age">
</div>
<div class="form-group">
<label for="smr"><i class="fas fa-running"></i> Skeletal Muscle Ratio (SMR)</label>
<input type="number" id="smr" min="20" max="60" step="0.1" placeholder="Skeletal Muscle Ratio %">
</div>
</div>
<button class="btn" id="generateReport">
<i class="fas fa-file-medical-alt"></i> Generate Health Report
</button>
<div class="report-container" id="reportPreview" style="display: none;">
<div class="report-header">
<h3 class="report-title">Report Preview</h3>
<p class="report-date" id="previewDate"></p>
</div>
<p>Your report is ready! Switch to the "Health Report" tab to view your detailed body composition analysis.</p>
</div>
</div>
<!-- Tab 2: Health Report -->
<div id="tab2" class="tab-content">
<h2>Body Composition Analysis</h2>
<p>Comprehensive analysis of your body metrics compared to ideal ranges.</p>
<div class="report-container">
<div class="report-header">
<h3 class="report-title" id="reportTitle">Health Report</h3>
<p class="report-date" id="reportDate"></p>
</div>
<div class="metrics-grid" id="metricsGrid">
<!-- Metrics will be populated here by JavaScript -->
</div>
<h3>Body Scanner Report Standards</h3>
<table class="summary-table">
<thead>
<tr>
<th>Parameter</th>
<th>Ideal Range</th>
<th>Your Value</th>
<th>Status</th>
</tr>
</thead>
<tbody id="summaryTableBody">
<!-- Summary will be populated here by JavaScript -->
</tbody>
</table>
</div>
</div>
<!-- Tab 3: Product Recommendations -->
<div id="tab3" class="tab-content">
<h2>Personalized Product Recommendations</h2>
<p>Based on your health report, here are the Nutricharge products that may benefit you.</p>
<div class="products-grid" id="productsGrid">
<!-- Products will be populated here by JavaScript -->
</div>
<div class="report-container">
<h3>All Nutricharge Products Summary</h3>
<table class="summary-table">
<thead>
<tr>
<th>Product</th>
<th>Best For</th>
</tr>
</thead>
<tbody>
<tr><td>Nutricharge BJ</td><td>Joint & bone health</td></tr>
<tr><td>Nutricharge Man</td><td>Men's wellness</td></tr>
<tr><td>Nutricharge Woman</td><td>Women's nutrition</td></tr>
<tr><td>Health Guard (Gamma Oryzanol)</td><td>Heart & metabolism</td></tr>
<tr><td>Nutricharge S5</td><td>General wellness</td></tr>
<tr><td>Nutricharge BioAge</td><td>Digestion & liver</td></tr>
<tr><td>Nutricharge Veg Omega</td><td>Heart, skin, joints</td></tr>
<tr><td>Nutricharge DHA 200</td><td>Brain & eye health</td></tr>
<tr><td>Nutricharge Glycem</td><td>Blood sugar support</td></tr>
<tr><td>Nutricharge View</td><td>Eye protection</td></tr>
<tr><td>Nutricharge ProDiet Shake</td><td>Weight management</td></tr>
<tr><td>Nutricharge Slim & Fit</td><td>Weight loss support</td></tr>
<tr><td>Nutricharge Kids Nutrition</td><td>Children's growth</td></tr>
<tr><td>Nutricharge All Pro</td><td>Plant protein needs</td></tr>
<tr><td>Nutricharge Kesar Pista ProDiet</td><td>Nutritional support</td></tr>
<tr><td>Nutricharge Cocoa ProDiet</td><td>Nutritional support</td></tr>
<tr><td>Nutricharge Strawberry ProDiet</td><td>Nutritional support</td></tr>
<tr><td>Nutricharge Gainer</td><td>Weight gain support</td></tr>
<tr><td>Giloy Tulsi Navras (Trikara)</td><td>Immunity support</td></tr>
<tr><td>Nutricharge Immunity Plus</td><td>Enhanced immunity</td></tr>
</tbody>
</table>
</div>
</div>
<footer>
<p>RCM Health Report Analyzer © 2023 | This tool provides health insights and product suggestions based on body composition data.</p>
<p>Consult with a healthcare professional before starting any new supplement regimen.</p>
</footer>
</div>
<script>
// Product data with descriptions
const products = [
{
id: 1,
name: "Nutricharge BJ",
bestFor: ["Joint pain", "Knee pain", "Osteoarthritis", "Bone weakness", "Calcium & Vitamin D deficiency"],
helpsIn: ["Joint stiffness", "Bone strength", "Mobility in aging people"],
notFor: "Severe arthritis or fracture treatment",
category: "bone_joint"
},
{
id: 2,
name: "Nutricharge Man",
bestFor: ["Weakness & fatigue", "Low immunity", "Stress", "Poor nutrition in men"],
helpsIn: ["Energy levels", "Immunity", "Muscle & bone support", "General wellness"],
notFor: "Hormonal or sexual disorders",
category: "men"
},
{
id: 3,
name: "Nutricharge Woman",
bestFor: ["Women's nutrition", "PMS symptoms", "Hair, skin & nail weakness", "Fatigue"],
helpsIn: ["Energy", "Bone strength", "Skin & hair health", "Immunity"],
notFor: "Hormonal disorders or infertility",
category: "women"
},
{
id: 4,
name: "Health Guard (Gamma Oryzanol)",
bestFor: ["High cholesterol", "Heart health support", "Stress & metabolic health"],
helpsIn: ["Heart wellness", "Blood lipid balance", "Stress management"],
notFor: "Heart disease treatment",
category: "heart_metabolism"
},
{
id: 5,
name: "Nutricharge S5",
bestFor: ["General wellness", "Nutritional gaps", "Daily energy support"],
helpsIn: ["Overall health", "Nutrient absorption", "Energy levels"],
notFor: "Specific medical conditions",
category: "general"
},
{
id: 6,
name: "Nutricharge BioAge",
bestFor: ["Digestive issues", "Liver support", "Weak immunity", "Poor nutrient absorption"],
helpsIn: ["Gut health", "Liver detox support", "Better digestion"],
notFor: "Liver disease treatment",
category: "digestion"
},
{
id: 7,
name: "Nutricharge Veg Omega",
bestFor: ["Dry skin & hair", "Joint lubrication", "Heart health support"],
helpsIn: ["Omega-3 deficiency", "Skin, hair & nails", "Cholesterol balance"],
notFor: "Heart disease cure",
category: "skin_heart"
},
{
id: 8,
name: "Nutricharge DHA 200",
bestFor: ["Pregnant women", "Breastfeeding mothers", "Children & teens", "Elderly brain health"],
helpsIn: ["Brain & eye development", "Memory & focus"],
notFor: "Neurological disease treatment",
category: "brain_eye"
},
{
id: 9,
name: "Nutricharge Glycem",
bestFor: ["Pre-diabetes", "Borderline blood sugar", "Family history of diabetes"],
helpsIn: ["Blood sugar control support", "Insulin sensitivity"],
notFor: "Diabetes treatment alone (medicine still needed)",
category: "blood_sugar"
},
{
id: 10,
name: "Nutricharge View",
bestFor: ["Eye strain", "Screen users", "Age-related eye weakness"],
helpsIn: ["Vision support", "Blue-light protection", "Eye fatigue"],
notFor: "Cataract or eye disease cure",
category: "eye"
},
{
id: 11,
name: "Nutricharge ProDiet Shake (Coffee Hazelnut)",
bestFor: ["Weight management", "Meal replacement", "Nutritional support"],
helpsIn: ["Controlled calorie intake", "Protein supply", "Satiety"],
notFor: "Medical weight loss programs",
category: "weight"
},
{
id: 12,
name: "Nutricharge Slim & Fit",
bestFor: ["Weight loss support", "Metabolism boost", "Appetite control"],
helpsIn: ["Weight management", "Fat metabolism", "Energy during dieting"],
notFor: "Obesity treatment without diet/exercise",
category: "weight"
},
{
id: 13,
name: "Nutricharge Kids Nutrition",
bestFor: ["Growing children", "Nutritional deficiencies", "Picky eaters"],
helpsIn: ["Growth support", "Immune function", "Brain development"],
notFor: "Medical conditions in children",
category: "kids"
},
{
id: 14,
name: "Nutricharge All Pro (Plant Protein)",
bestFor: ["Vegetarians/Vegans", "Athletes", "Muscle recovery", "Protein deficiency"],
helpsIn: ["Muscle building", "Recovery after exercise", "Plant-based protein source"],
notFor: "Kidney disease patients without consultation",
category: "protein"
},
{
id: 15,
name: "Nutricharge Kesar Pista ProDiet",
bestFor: ["Nutritional support", "Energy boost", "Healthy snacking"],
helpsIn: ["Providing essential nutrients", "Sustained energy", "Tasteful nutrition"],
notFor: "Nut allergies",
category: "general"
},
{
id: 16,
name: "Nutricharge Cocoa ProDiet",
bestFor: ["Nutritional support", "Chocolate cravings", "Energy needs"],
helpsIn: ["Healthy indulgence", "Nutrient intake", "Mood elevation"],
notFor: "Cocoa allergies",
category: "general"
},
{
id: 17,
name: "Nutricharge Strawberry ProDiet",
bestFor: ["Nutritional support", "Fruit flavor preference", "Vitamin needs"],
helpsIn: ["Vitamin intake", "Antioxidant supply", "Tasteful nutrition"],
notFor: "Strawberry allergies",
category: "general"
},
{
id: 18,
name: "Nutricharge Gainer",
bestFor: ["Underweight individuals", "Muscle gain", "High calorie needs"],
helpsIn: ["Healthy weight gain", "Muscle building", "Calorie supplementation"],
notFor: "Weight gain without exercise",
category: "weight"
},
{
id: 19,
name: "Giloy Tulsi Navras (Trikara)",
bestFor: ["Immunity support", "Respiratory health", "Seasonal ailments"],
helpsIn: ["Immune function", "Respiratory wellness", "Ayurvedic support"],
notFor: "Serious infections or diseases",
category: "immunity"
},
{
id: 20,
name: "Nutricharge Immunity Plus",
bestFor: ["Low immunity", "Frequent infections", "Recovery support"],
helpsIn: ["Enhanced immune function", "Faster recovery", "Overall wellness"],
notFor: "Autoimmune diseases without consultation",
category: "immunity"
}
];
// Tab switching functionality
document.querySelectorAll('.tab-button').forEach(button => {
button.addEventListener('click', () => {
// Remove active class from all tabs and buttons
document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
// Add active class to clicked button
button.classList.add('active');
// Show corresponding tab content
const tabId = button.getAttribute('data-tab');
document.getElementById(tabId).classList.add('active');
});
});
// Generate report functionality
document.getElementById('generateReport').addEventListener('click', generateReport);
function generateReport() {
// Get form values
const name = document.getElementById('name').value || "User";
const gender = document.querySelector('input[name="gender"]:checked').value;
const age = parseInt(document.getElementById('age').value) || 30;
const height = parseFloat(document.getElementById('height').value) || 170;
const weight = parseFloat(document.getElementById('weight').value) || 70;
const bodyFat = parseFloat(document.getElementById('bodyFat').value) || 20;
const water = parseFloat(document.getElementById('water').value) || 55;
const muscle = parseFloat(document.getElementById('muscle').value) || 30;
const bone = parseFloat(document.getElementById('bone').value) || 3;
const visceral = parseFloat(document.getElementById('visceral').value) || 5;
const bmr = parseFloat(document.getElementById('bmr').value) || 1600;
const metabolicAge = parseFloat(document.getElementById('metabolicAge').value) || age;
const smr = parseFloat(document.getElementById('smr').value) || 40;
// Calculate BMI if not provided or calculate from height/weight
let bmi = (weight / ((height/100) * (height/100))).toFixed(1);
// Calculate ideal weight range
const idealWeightMin = (height - 100) - 3;
const idealWeightMax = (height - 100) + 3;
// Set date for report
const now = new Date();
const reportDate = now.toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
// Update report title and date
document.getElementById('reportTitle').textContent = `${name}'s Health Report`;
document.getElementById('reportDate').textContent = reportDate;
document.getElementById('previewDate').textContent = `Generated on ${reportDate}`;
// Show report preview
document.getElementById('reportPreview').style.display = 'block';
// Calculate status for each metric
const metrics = [
{
name: "Weight",
value: `${weight} kg`,
range: `Ideal: ${idealWeightMin} - ${idealWeightMax} kg`,
status: getWeightStatus(weight, idealWeightMin, idealWeightMax)
},
{
name: "BMI",
value: bmi,
range: "Ideal: 20 - 25",
status: getBMIStatus(bmi)
},
{
name: "Body Fat %",
value: `${bodyFat}%`,
range: gender === "male" ? "Ideal: 20% or less" : "Ideal: 25% or less",
status: getBodyFatStatus(bodyFat, gender)
},
{
name: "Water %",
value: `${water}%`,
range: "Ideal: 55% or more",
status: getWaterStatus(water)
},
{
name: "Muscle Mass",
value: `${muscle} kg`,
range: "Based on age, gender & weight",
status: getMuscleStatus(muscle, weight, gender)
},
{
name: "Bone Mass",
value: `${bone} kg`,
range: "Ideal: 3 kg or more",
status: getBoneStatus(bone)
},
{
name: "Visceral Fat",
value: visceral,
range: "Ideal: 3 or less",
status: getVisceralStatus(visceral)
},
{
name: "BMR",
value: `${bmr} Calories`,
range: gender === "male" ? "Ideal: 1700-2000 Calories" : "Ideal: 1500-1800 Calories",
status: getBMRStatus(bmr, gender)
},
{
name: "Metabolic Age",
value: metabolicAge,
range: "Ideal: Same or less than physical age",
status: getMetabolicAgeStatus(metabolicAge, age)
},
{
name: "Skeletal Muscle Ratio",
value: `${smr}%`,
range: gender === "male" ? "Ideal: 45% or more" : "Ideal: 36% or more",
status: getSMRStatus(smr, gender)
}
];
// Populate metrics grid
const metricsGrid = document.getElementById('metricsGrid');
metricsGrid.innerHTML = '';
metrics.forEach(metric => {
const statusClass = getStatusClass(metric.status);
const metricCard = document.createElement('div');
metricCard.className = 'metric-card';
metricCard.innerHTML = `
<div class="metric-header">
<div class="metric-name">${metric.name}</div>
<div class="metric-value">${metric.value}</div>
</div>
<div class="metric-range">${metric.range}</div>
<div class="metric-status ${statusClass}">${metric.status}</div>
`;
metricsGrid.appendChild(metricCard);
});
// Populate summary table
const summaryTableBody = document.getElementById('summaryTableBody');
summaryTableBody.innerHTML = '';
metrics.forEach(metric => {
const statusClass = getStatusClass(metric.status);
const row = document.createElement('tr');
row.innerHTML = `
<td>${metric.name}</td>
<td>${metric.range}</td>
<td>${metric.value}</td>
<td><span class="metric-status ${statusClass}">${metric.status}</span></td>
`;
summaryTableBody.appendChild(row);
});
// Generate product recommendations based on user data
generateProductRecommendations(name, gender, age, bmi, bodyFat, bone, visceral, metabolicAge, smr, water);
// Switch to report tab
document.querySelectorAll('.tab-button')[1].click();
}
// Status calculation functions
function getWeightStatus(weight, min, max) {
if (weight >= min && weight <= max) return "Ideal";
if (weight < min) return "Underweight";
return "Overweight";
}
function getBMIStatus(bmi) {
if (bmi >= 20 && bmi <= 25) return "Normal";
if (bmi < 18.5) return "Underweight";
if (bmi < 25) return "Normal";
if (bmi < 30) return "Overweight";
return "Obese";
}
function getBodyFatStatus(bodyFat, gender) {
if (gender === "male" && bodyFat <= 20) return "Good";
if (gender === "female" && bodyFat <= 25) return "Good";
return "High";
}
function getWaterStatus(water) {
return water >= 55 ? "Good" : "Low";
}
function getMuscleStatus(muscle, weight, gender) {
const musclePercentage = (muscle / weight) * 100;
if (gender === "male" && musclePercentage >= 40) return "Good";
if (gender === "female" && musclePercentage >= 35) return "Good";
return "Could improve";
}
function getBoneStatus(bone) {
return bone >= 3 ? "Good" : "Low";
}
function getVisceralStatus(visceral) {
return visceral <= 3 ? "Good" : "High";
}
function getBMRStatus(bmr, gender) {
if (gender === "male" && bmr >= 1700 && bmr <= 2000) return "Normal";
if (gender === "female" && bmr >= 1500 && bmr <= 1800) return "Normal";
if (bmr < (gender === "male" ? 1700 : 1500)) return "Low";
return "High";
}
function getMetabolicAgeStatus(metabolicAge, age) {
if (metabolicAge <= age) return "Good";
return "Needs improvement";
}
function getSMRStatus(smr, gender) {
if (gender === "male" && smr >= 45) return "Good";
if (gender === "female" && smr >= 36) return "Good";
return "Low";
}
function getStatusClass(status) {
if (status === "Good" || status === "Ideal" || status === "Normal") return "status-good";
if (status === "Could improve" || status === "Needs improvement") return "status-warning";
return "status-poor";
}
// Generate product recommendations
function generateProductRecommendations(name, gender, age, bmi, bodyFat, bone, visceral, metabolicAge, smr, water) {
const productsGrid = document.getElementById('productsGrid');
productsGrid.innerHTML = '';
// Determine which products to recommend based on user data
const recommendedProducts = [];
// Always recommend gender-specific products
if (gender === "male") {
recommendedProducts.push(2); // Nutricharge Man
} else {
recommendedProducts.push(3); // Nutricharge Woman
}
// Recommend based on BMI
if (bmi < 18.5) {
recommendedProducts.push(18); // Nutricharge Gainer
} else if (bmi >= 25) {
recommendedProducts.push(11); // Nutricharge ProDiet Shake
recommendedProducts.push(12); // Nutricharge Slim & Fit
}
// Recommend based on bone mass
if (bone < 3 || age > 50) {
recommendedProducts.push(1); // Nutricharge BJ
}
// Recommend based on body fat and visceral fat
if (bodyFat > (gender === "male" ? 20 : 25) || visceral > 3) {
recommendedProducts.push(12); // Nutricharge Slim & Fit
}
// Recommend based on visceral fat and metabolic age
if (visceral > 3 || metabolicAge > age) {
recommendedProducts.push(4); // Health Guard
}
// Recommend based on water percentage
if (water < 55) {
recommendedProducts.push(19); // Giloy Tulsi Navras
recommendedProducts.push(20); // Nutricharge Immunity Plus
}
// Recommend based on SMR
if ((gender === "male" && smr < 45) || (gender === "female" && smr < 36)) {
recommendedProducts.push(14); // Nutricharge All Pro
}
// Always include immunity products
recommendedProducts.push(19); // Giloy Tulsi Navras
recommendedProducts.push(20); // Nutricharge Immunity Plus
// Remove duplicates
const uniqueProducts = [...new Set(recommendedProducts)];
// Display recommended products (limit to 6 for better UX)
const displayProducts = uniqueProducts.slice(0, 6);
displayProducts.forEach(productId => {
const product = products.find(p => p.id === productId);
if (product) {
const productCard = document.createElement('div');
productCard.className = 'product-card';
const bestForList = product.bestFor.map(item => `<li><i class="fas fa-check-circle icon-good"></i> ${item}</li>`).join('');
const helpsInList = product.helpsIn.map(item => `<li><i class="fas fa-check icon-good"></i> ${item}</li>`).join('');
productCard.innerHTML = `
<div class="product-header">
<div class="product-name">${product.name}</div>
<div class="recommended-tag">Recommended</div>
</div>
<div class="product-body">
<div class="product-section">
<h4><i class="fas fa-star"></i> Best For:</h4>
<ul class="product-list">
${bestForList}
</ul>
</div>
<div class="product-section">
<h4><i class="fas fa-thumbs-up"></i> Helps In:</h4>
<ul class="product-list">
${helpsInList}
</ul>
</div>
<div class="product-section">
<h4><i class="fas fa-exclamation-triangle icon-not"></i> Not For:</h4>
<p>${product.notFor}</p>
</div>
</div>
`;
productsGrid.appendChild(productCard);
}
});
// Add note about other products
if (uniqueProducts.length > 6) {
const noteCard = document.createElement('div');
noteCard.className = 'product-card';
noteCard.innerHTML = `
<div class="product-header">
<div class="product-name">More Recommendations</div>
</div>
<div class="product-body">
<p>Based on your health profile, ${uniqueProducts.length - 6} additional products may be beneficial for you.</p>
<p>Check the summary table below to see all available Nutricharge products and their benefits.</p>
</div>
`;
productsGrid.appendChild(noteCard);
}
}
// Initialize with some default data for demo
window.addEventListener('DOMContentLoaded', () => {
// Set some default values for demo
document.getElementById('name').value = "Rahul Sharma";
document.getElementById('age').value = "42";
document.getElementById('height').value = "175";
document.getElementById('weight').value = "82";
document.getElementById('bodyFat').value = "24";
document.getElementById('water').value = "53";
document.getElementById('muscle').value = "32";
document.getElementById('bone').value = "2.8";
document.getElementById('visceral').value = "6";
document.getElementById('bmr').value = "1750";
document.getElementById('metabolicAge').value = "48";
document.getElementById('smr').value = "38";
// Pre-populate products tab
const productsGrid = document.getElementById('productsGrid');
products.forEach(product => {
const productCard = document.createElement('div');
productCard.className = 'product-card';
const bestForList = product.bestFor.map(item => `<li><i class="fas fa-check-circle icon-good"></i> ${item}</li>`).join('');
const helpsInList = product.helpsIn.map(item => `<li><i class="fas fa-check icon-good"></i> ${item}</li>`).join('');
productCard.innerHTML = `
<div class="product-header">
<div class="product-name">${product.name}</div>
</div>
<div class="product-body">
<div class="product-section">
<h4><i class="fas fa-star"></i> Best For:</h4>
<ul class="product-list">
${bestForList}
</ul>
</div>
<div class="product-section">
<h4><i class="fas fa-thumbs-up"></i> Helps In:</h4>
<ul class="product-list">
${helpsInList}
</ul>
</div>
<div class="product-section">
<h4><i class="fas fa-exclamation-triangle icon-not"></i> Not For:</h4>
<p>${product.notFor}</p>
</div>
</div>
`;
productsGrid.appendChild(productCard);
});
});
</script>