Enhance table styling and layout in report pages

- Updated table header and cell classes to center-align text for better readability in page_19.html.
- Adjusted padding and margins in page_7.html for improved layout and visual consistency.
- Reduced spacing in various sections to create a more compact and organized appearance.
This commit is contained in:
bolade
2025-09-29 11:17:32 +01:00
parent a20f21d288
commit 54e0189301
6 changed files with 208 additions and 207 deletions
+2 -1
View File
@@ -2,4 +2,5 @@ import pandas as pd
pnoe_df = pd.read_csv('data/pnoe_data.csv') pnoe_df = pd.read_csv('data/pnoe_data.csv')
patient_df = pd.read_csv('data/patient_data.csv') patient_df = pd.read_csv('data/patient_data.csv')
spirometry_df = pd.read_csv('data/spirometry_data.csv') spirometry_df = pd.read_csv('data/spirometry_data.csv')
Binary file not shown.

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.
+3 -3
View File
File diff suppressed because one or more lines are too long
+196 -196
View File
@@ -18,42 +18,42 @@
<thead> <thead>
<tr class="bg-cyan-200"> <tr class="bg-cyan-200">
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Age (M) Age (M)
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Poor Poor
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Below Average Below Average
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Average Average
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Above Average Above Average
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Good Good
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Excellent Excellent
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Athlete Athlete
</th> </th>
@@ -62,169 +62,169 @@
<tbody> <tbody>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
18-25 18-25
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
85bpm + 85bpm +
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
76-84bpm 76-84bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
74-78bpm 74-78bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
70-73bpm 70-73bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
66-69bpm 66-69bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
61-65bpm 61-65bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
60-60bpm 60-60bpm
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
26-35 26-35
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
83bpm + 83bpm +
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
77-82bpm 77-82bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
73-76bpm 73-76bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
69-72bpm 69-72bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
65-68bpm 65-68bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
60-64bpm 60-64bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
55-59bpm 55-59bpm
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
36-45 36-45
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
85bpm + 85bpm +
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
79-84bpm 79-84bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
74-78bpm 74-78bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
70-73bpm 70-73bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
65-69bpm 65-69bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
60-64bpm 60-64bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
55-59bpm 55-59bpm
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
46-55 46-55
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
84bpm + 84bpm +
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
76-83bpm 76-83bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
73-77bpm 73-77bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
70-72bpm 70-72bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
66-69bpm 66-69bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
61-65bpm 61-65bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
56-60bpm 56-60bpm
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
56-65 56-65
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
85bpm + 85bpm +
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
78-84bpm 78-84bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
74-77bpm 74-77bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
70-73bpm 70-73bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
65-69bpm 65-69bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
60-64bpm 60-64bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
50-59bpm 50-59bpm
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
65+ 65+
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
84bpm + 84bpm +
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
77-83bpm 77-83bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
73-76bpm 73-76bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
70-73bpm 70-73bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
65-69bpm 65-69bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
60-64bpm 60-64bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
55-59bpm 55-59bpm
</td> </td>
</tr> </tr>
@@ -240,42 +240,42 @@
<thead> <thead>
<tr class="bg-cyan-200"> <tr class="bg-cyan-200">
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Age (F) Age (F)
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Poor Poor
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Below Average Below Average
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Average Average
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Above Average Above Average
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Good Good
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Excellent Excellent
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Athlete Athlete
</th> </th>
@@ -284,169 +284,169 @@
<tbody> <tbody>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
18-25 18-25
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
81bpm + 81bpm +
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
74-81bpm 74-81bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
73-78bpm 73-78bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
66-69bpm 66-69bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
62-65bpm 62-65bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
56-61bpm 56-61bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
50-55bpm 50-55bpm
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
26-35 26-35
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
82bpm + 82bpm +
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
75-81bpm 75-81bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
71-74bpm 71-74bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
66-70bpm 66-70bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
62-65bpm 62-65bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
55-61bpm 55-61bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
54-54bpm 54-54bpm
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
36-45 36-45
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
83bpm + 83bpm +
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
76-82bpm 76-82bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
71-75bpm 71-75bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
67-70bpm 67-70bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
63-66bpm 63-66bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
57-62bpm 57-62bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
47-56bpm 47-56bpm
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
46-55 46-55
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
84bpm + 84bpm +
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
77-83bpm 77-83bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
72-76bpm 72-76bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
68-71bpm 68-71bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
64-67bpm 64-67bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
58-63bpm 58-63bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
49-57bpm 49-57bpm
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
56-65 56-65
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
82bpm + 82bpm +
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
76-81bpm 76-81bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
72-75bpm 72-75bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
68-71bpm 68-71bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
62-67bpm 62-67bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
57-61bpm 57-61bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
51-56bpm 51-56bpm
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
65+ 65+
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
80bpm + 80bpm +
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
74-79bpm 74-79bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
70-73bpm 70-73bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
66-69bpm 66-69bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
62-65bpm 62-65bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
56-61bpm 56-61bpm
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
52-55bpm 52-55bpm
</td> </td>
</tr> </tr>
@@ -469,37 +469,37 @@
<thead> <thead>
<tr class="bg-cyan-200"> <tr class="bg-cyan-200">
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Age (M) Age (M)
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Very Poor Very Poor
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Poor Poor
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Fair Fair
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Good Good
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Excellent Excellent
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Superior Superior
</th> </th>
@@ -508,126 +508,126 @@
<tbody> <tbody>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
20-29 20-29
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
29.0-38.1 29.0-38.1
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
38.1-44.9 38.1-44.9
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
44.9-50.2 44.9-50.2
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
50.2-61.8 50.2-61.8
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
57.1-66.3 57.1-66.3
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
66.3+ 66.3+
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
30-39 30-39
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
27.2-34.1 27.2-34.1
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
34.1-39.6 34.1-39.6
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
39.6-45.2 39.6-45.2
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
45.2-51.6 45.2-51.6
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
51.6-59.8 51.6-59.8
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
59.8+ 59.8+
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
40-49 40-49
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
24.2-30.5 24.2-30.5
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
30.5-35.7 30.5-35.7
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
35.7-40.3 35.7-40.3
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
40.3-46.7 40.3-46.7
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
46.7-55.6 46.7-55.6
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
55.6+ 55.6+
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
50-59 50-59
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
20.9-26.1 20.9-26.1
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
26.1-30.7 26.1-30.7
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
30.7-35.1 30.7-35.1
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
35.1-41.2 35.1-41.2
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
41.2-50.7 41.2-50.7
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
50.7+ 50.7+
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
60-69 60-69
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
17.4-22.4 17.4-22.4
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
22.4-26.6 22.4-26.6
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
26.6-30.5 26.6-30.5
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
30.5-36.1 30.5-36.1
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
36.1-43.0 36.1-43.0
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
43.0+ 43.0+
</td> </td>
</tr> </tr>
@@ -643,37 +643,37 @@
<thead> <thead>
<tr class="bg-cyan-200"> <tr class="bg-cyan-200">
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Age (F) Age (F)
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Very Poor Very Poor
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Poor Poor
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Fair Fair
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Good Good
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Excellent Excellent
</th> </th>
<th <th
class="border border-gray-300 p-1 font-bold" class="border border-gray-300 p-1 font-bold text-center"
> >
Superior Superior
</th> </th>
@@ -682,126 +682,126 @@
<tbody> <tbody>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
20-29 20-29
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
21.7-28.6 21.7-28.6
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
28.6-34.6 28.6-34.6
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
34.6-40.6 34.6-40.6
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
40.6-46.5 40.6-46.5
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
46.5-56.0 46.5-56.0
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
56.0+ 56.0+
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
30-39 30-39
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
19.0-24.1 19.0-24.1
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
24.1-28.2 24.1-28.2
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
28.2-32.2 28.2-32.2
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
32.2-35.7 32.2-35.7
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
35.7-45.8 35.7-45.8
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
45.8+ 45.8+
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
40-49 40-49
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
17.0-21.3 17.0-21.3
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
21.3-24.9 21.3-24.9
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
24.9-28.7 24.9-28.7
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
28.7-34.0 28.7-34.0
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
34.0-41.7 34.0-41.7
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
41.7+ 41.7+
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
50-59 50-59
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
16.0-19.1 16.0-19.1
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
19.1-24.4 19.1-24.4
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
21.8-27.6 21.8-27.6
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
25.2-28.6 25.2-28.6
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
28.6-35.9 28.6-35.9
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
35.9+ 35.9+
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td
class="border border-gray-300 p-1 font-medium" class="border border-gray-300 p-1 font-medium text-center"
> >
60-69 60-69
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
13.4-16.5 13.4-16.5
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
16.5-18.9 16.5-18.9
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
18.9-21.2 18.9-21.2
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
21.2-24.6 21.2-24.6
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
24.6-29.4 24.6-29.4
</td> </td>
<td class="border border-gray-300 p-1"> <td class="border border-gray-300 p-1 text-center">
29.4+ 29.4+
</td> </td>
</tr> </tr>
+7 -7
View File
@@ -1,11 +1,11 @@
<div class="w-full page bg-white p-8"> <div class="w-full page bg-white p-4">
<!-- Header --> <!-- Header -->
<h1 class="text-3xl font-bold mb-6">Lung Analysis</h1> <h1 class="text-3xl font-bold mb-2">Lung Analysis</h1>
<!-- Spirometry Assessment Section --> <!-- Spirometry Assessment Section -->
<div class="mb-8"> <div class="mb-2">
<h2 class="text-xl font-semibold mb-4">Spirometry Assessment</h2> <h2 class="text-xl font-semibold mb-4">Spirometry Assessment</h2>
<p class="text-sm text-gray-700 mb-6"> <p class="text-sm text-gray-700 mb-4">
Spirometry is a diagnostic device that assesses how well a person Spirometry is a diagnostic device that assesses how well a person
breathes and how their lungs are functioning. Lung function is breathes and how their lungs are functioning. Lung function is
crucial for oxygen delivery during physical activity. Comparing crucial for oxygen delivery during physical activity. Comparing
@@ -24,18 +24,18 @@
</div> </div>
<!-- Indications Box --> <!-- Indications Box -->
<div class="bg-gray-200 rounded-lg p-4 text-center mb-8"> <div class="bg-gray-200 rounded-lg p-4 text-center mb-2">
<h3 class="font-semibold text-lg mb-2">Indications</h3> <h3 class="font-semibold text-lg mb-2">Indications</h3>
<p class="text-gray-700">{{ indication }}</p> <p class="text-gray-700">{{ indication }}</p>
</div> </div>
</div> </div>
<!-- Respiratory Section --> <!-- Respiratory Section -->
<div class="mb-8"> <div class="mb-4">
<h2 class="text-xl font-semibold mb-4 text-center">Respiratory</h2> <h2 class="text-xl font-semibold mb-4 text-center">Respiratory</h2>
<!-- Respiratory Chart --> <!-- Respiratory Chart -->
<div class="flex justify-center mb-6"> <div class="flex justify-center mb-4">
<img <img
src="data:image/png;base64,{{ respiratory_analysis_chart }}" src="data:image/png;base64,{{ respiratory_analysis_chart }}"
alt="Respiratory Analysis Chart" alt="Respiratory Analysis Chart"