Skip to content

Rcm body scanner app #591

@hdhdjdxizei-cpu

Description

@hdhdjdxizei-cpu
<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 &copy; 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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions