bio-performx/report_gen/page_12.html

<div class="page bg-white p-8 max-w-4xl mx-auto">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-4">Local Muscle Activity</h1>
        <h2 class="text-xl font-semibold text-gray-800 mb-2">Muscle Oxygenation Assessment</h2>
        <p class="text-sm text-gray-600 leading-relaxed">
            SMO2 testing (Skeletal Muscle Oxygen Saturation) is an analysis of how effectively oxygen is being used at a particular muscle. It helps determine limitations on if the muscle is effectively using oxygen when exercising.
        </p>
    </div>

    <!-- Right Leg Section -->
    <div class="mb-12">
        <h3 class="text-lg font-semibold text-center text-gray-800 mb-6">Indications - Right Leg</h3>
        
        <div class="flex gap-8">
            <!-- Chart Image -->
            <div class="flex-1">
                <img src="right-leg-chart.png" alt="Right Leg SMO2 Chart" class="w-full h-auto">
            </div>
            
            <!-- Right Side Info -->
            <div class="w-48 space-y-4">
                <div class="bg-gray-100 p-3 rounded">
                    <div class="text-xs font-semibold text-gray-700 mb-1">Surplus</div>
                    <div class="text-xs text-gray-600">Supply > Demand at a heart rate and speed of:</div>
                    <div class="text-sm font-bold text-gray-800">n/a</div>
                </div>
                
                <div class="bg-gray-100 p-3 rounded">
                    <div class="text-xs font-semibold text-gray-700 mb-1">Supply Threshold</div>
                    <div class="text-xs text-gray-600">Demand outstrips supply at a heart rate of:</div>
                    <div class="text-sm font-bold text-gray-800">154bpm @ 5.0mph</div>
                </div>
                
                <div class="bg-gray-100 p-3 rounded">
                    <div class="text-xs font-semibold text-gray-700 mb-1">Recovery</div>
                    <div class="text-xs text-gray-600">"Optimal >100%"</div>
                    <div class="text-sm font-bold text-gray-800">n/a</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Left Leg Section -->
    <div>
        <h3 class="text-lg font-semibold text-center text-gray-800 mb-6">Indications - Left Leg</h3>
        
        <div class="flex gap-8">
            <!-- Chart Image -->
            <div class="flex-1">
                <img src="left-leg-chart.png" alt="Left Leg SMO2 Chart" class="w-full h-auto">
            </div>
            
            <!-- Right Side Info -->
            <div class="w-48 space-y-4">
                <div class="bg-gray-100 p-3 rounded">
                    <div class="text-xs font-semibold text-gray-700 mb-1">Surplus</div>
                    <div class="text-xs text-gray-600">Supply > Demand at a heart rate and speed of:</div>
                    <div class="text-sm font-bold text-gray-800">n/a</div>
                </div>
                
                <div class="bg-gray-100 p-3 rounded">
                    <div class="text-xs font-semibold text-gray-700 mb-1">Supply Threshold</div>
                    <div class="text-xs text-gray-600">Demand outstrips supply at a heart rate of:</div>
                    <div class="text-sm font-bold text-gray-800">165 bpm @ 5.5mph</div>
                </div>
                
                <div class="bg-gray-100 p-3 rounded">
                    <div class="text-xs font-semibold text-gray-700 mb-1">Recovery</div>
                    <div class="text-xs text-gray-600">"Optimal >100%"</div>
                    <div class="text-sm font-bold text-gray-800">n/a</div>
                </div>
            </div>
        </div>
    </div>
</div>