Refactor code structure for improved readability and maintainability

This commit is contained in:
bolade
2025-11-26 11:23:04 +01:00
parent 47e6e69eb7
commit 100b47e947
12 changed files with 1335 additions and 641 deletions
+40 -44
View File
@@ -27,55 +27,53 @@
</div>
<!-- Metrics Summary Grid -->
<div class="grid grid-cols-2 gap-6 mb-6">
<div class="grid grid-cols-2 gap-4 mb-4">
<!-- Left Leg Metrics -->
<div class="bg-blue-50 p-4 rounded-lg border-2 border-blue-200">
<h3 class="text-lg font-bold text-gray-900 mb-4 text-center">
<div class="bg-blue-50 p-3 rounded-lg border-l-4 border-blue-300">
<h3 class="text-base font-bold text-gray-900 mb-3 text-center">
Left Leg Analysis
</h3>
<div class="space-y-3">
<div class="bg-white p-3 rounded shadow-sm">
<div class="text-xs font-semibold text-gray-700 mb-1">
<div class="space-y-2">
<div class="bg-white p-2 rounded shadow-sm">
<div class="text-xs font-semibold text-gray-700">
Baseline SmO₂
</div>
<div class="text-lg font-bold text-gray-900">
<div class="text-base font-bold text-gray-900">
{{ left_baseline_smo2 | default('75.4%') }}
</div>
</div>
<div class="bg-white p-3 rounded shadow-sm">
<div class="text-xs font-semibold text-gray-700 mb-1">
<div class="bg-white p-2 rounded shadow-sm">
<div class="text-xs font-semibold text-gray-700">
Minimum SmO₂
</div>
<div class="text-lg font-bold text-gray-900">
<div class="text-base font-bold text-gray-900">
{{ left_minimum_smo2 | default('69.3%') }}
</div>
<div class="text-xs text-gray-600 mt-1">
<div class="text-xs text-gray-500">
{{ left_minimum_lap | default('Lap 6') }}
</div>
</div>
<div class="bg-white p-3 rounded shadow-sm">
<div class="text-xs font-semibold text-gray-700 mb-1">
<div class="bg-white p-2 rounded shadow-sm">
<div class="text-xs font-semibold text-gray-700">
Oxygen Drop
</div>
<div class="text-lg font-bold text-gray-900">
<div class="text-base font-bold text-gray-900">
{{ left_oxygen_drop | default('6.0%') }}
</div>
<div class="text-xs text-gray-600 mt-1">
<div class="text-xs text-gray-500">
{{ left_drop_percentage | default('8% decrease') }}
</div>
</div>
<div class="bg-white p-3 rounded shadow-sm">
<div class="text-xs font-semibold text-gray-700 mb-1">
<div class="bg-white p-2 rounded shadow-sm">
<div class="text-xs font-semibold text-gray-700">
Recovery
</div>
<div class="text-xs text-gray-600 mb-1">
"Optimal >100%"
</div>
<div class="text-lg font-bold text-green-600">
<div class="text-xs text-gray-500">"Optimal >100%"</div>
<div class="text-base font-bold text-green-600">
{{ left_recovery_percentage | default('109%') }}
</div>
</div>
@@ -83,53 +81,51 @@
</div>
<!-- Right Leg Metrics -->
<div class="bg-purple-50 p-4 rounded-lg border-2 border-purple-200">
<h3 class="text-lg font-bold text-gray-900 mb-4 text-center">
<div class="bg-purple-50 p-3 rounded-lg border-l-4 border-purple-300">
<h3 class="text-base font-bold text-gray-900 mb-3 text-center">
Right Leg Analysis
</h3>
<div class="space-y-3">
<div class="bg-white p-3 rounded shadow-sm">
<div class="text-xs font-semibold text-gray-700 mb-1">
<div class="space-y-2">
<div class="bg-white p-2 rounded shadow-sm">
<div class="text-xs font-semibold text-gray-700">
Baseline SmO₂
</div>
<div class="text-lg font-bold text-gray-900">
<div class="text-base font-bold text-gray-900">
{{ right_baseline_smo2 | default('82.9%') }}
</div>
</div>
<div class="bg-white p-3 rounded shadow-sm">
<div class="text-xs font-semibold text-gray-700 mb-1">
<div class="bg-white p-2 rounded shadow-sm">
<div class="text-xs font-semibold text-gray-700">
Minimum SmO₂
</div>
<div class="text-lg font-bold text-gray-900">
<div class="text-base font-bold text-gray-900">
{{ right_minimum_smo2 | default('73.7%') }}
</div>
<div class="text-xs text-gray-600 mt-1">
<div class="text-xs text-gray-500">
{{ right_minimum_lap | default('Lap 6') }}
</div>
</div>
<div class="bg-white p-3 rounded shadow-sm">
<div class="text-xs font-semibold text-gray-700 mb-1">
<div class="bg-white p-2 rounded shadow-sm">
<div class="text-xs font-semibold text-gray-700">
Oxygen Drop
</div>
<div class="text-lg font-bold text-gray-900">
<div class="text-base font-bold text-gray-900">
{{ right_oxygen_drop | default('9.3%') }}
</div>
<div class="text-xs text-gray-600 mt-1">
<div class="text-xs text-gray-500">
{{ right_drop_percentage | default('11% decrease') }}
</div>
</div>
<div class="bg-white p-3 rounded shadow-sm">
<div class="text-xs font-semibold text-gray-700 mb-1">
<div class="bg-white p-2 rounded shadow-sm">
<div class="text-xs font-semibold text-gray-700">
Recovery
</div>
<div class="text-xs text-gray-600 mb-1">
"Optimal >100%"
</div>
<div class="text-lg font-bold text-blue-600">
<div class="text-xs text-gray-500">"Optimal >100%"</div>
<div class="text-base font-bold text-blue-600">
{{ right_recovery_percentage | default('97%') }}
</div>
</div>
@@ -138,9 +134,9 @@
</div>
<!-- Key Findings Summary -->
<div class="bg-gray-100 p-4 rounded-lg">
<h3 class="text-base font-bold text-gray-900 mb-3">Key Findings</h3>
<div class="text-sm text-gray-700 space-y-2">
<div class="bg-gray-100 p-3 rounded-lg">
<h3 class="text-sm font-bold text-gray-900 mb-2">Key Findings</h3>
<div class="text-xs text-gray-700 space-y-1">
<p>
<strong>Left leg</strong> showed better oxygen maintenance
during high-intensity work