hpos-web/scripts/report_template.html

<!DOCTYPE html>
<html>

<head>
    <style>
        @media print {
            body {
                -webkit-print-color-adjust: exact;
            }
        }

        .person-details-row {
            display: flex;
            flex-direction: row;
        }

        .person-details-col {
            display: flex;
            flex-direction: column;
            height: 90px;
            width: 50%;
            margin: 1px;
            border: 0;
        }

        .test-details-row {
            border: 0;
        }

        .test-details-col {
            height: 100px;
        }

        .test-cell-div {
            /* border: 1px solid black; */
            border-collapse: collapse;
            height: 20px;
            padding: 10px;
        }

        .table-header {
            border: 1px solid black;
            margin: 0 0 -10px 10px;
            background-color: rgb(191, 191, 191);
            text-align: center;
            justify-content: center;
            align-items: center;
            display: flex;
            font-weight: 600;
            height: 50px;
            width: 98%;
        }

        @media print {
            .table-header {
                background-color: rgb(191, 191, 191) !important;
                print-color-adjust: exact;
            }
        }

        @media print {
            .vendorListHeading th {
                color: white !important;
            }
        }

        .test-method {
            font-weight: 200 !important;
            color: rgb(191, 191, 191);
        }

        .result-value {
            justify-content: center;
            align-items: center;
            display: flex;
        }

        .end-of-report {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        ul {
            list-style-type: none;
            /* margin: 0; */
            /* padding: 0; */
        }
    </style>
</head>

<body>
    <div>
        <div class="logo">
            <img src="./logo_nobg.png" width="128" height="128" alt="sickle cell logo" />
        </div>
        <table style="border: 1px solid black; margin: 10px; width: 98%;">
            <tr class="person-details-row">
                <td class="person-details-col" style="border-right: 2; width: 70%;">
                    <div><strong>Name:</strong></div>
                    <div><strong>Age / Gender:</strong></div>
                    <div><strong>Sample type:</strong></div>
                    <div><strong>Family History of Sickle Cell Anemia:</strong></div>
                </td>
                <td class="person-details-col" style="width: 30%;">
                    <div><strong>Marital Status:</strong></div>
                    <div><strong>Test Date:</strong></div>
                    <div><strong>Patient ID:</strong></div>
                    <div><strong>Sample ID:</strong></div>
                </td>
            </tr>
        </table>
    </div>


    <div style="height: 2px;width: 98%; background-color: rgb(56, 105, 166); margin: 30px 10px 40px 10px;"></div>


    <div>
        <div class="table-header">POINT OF CARE SICKLE CELL ANEMIA TEST</div>
        <table class="test-details-table" style="border: 1px solid black; margin: 10px; width: 98%;">
            <tr style="height: 50px;">
                <th>
                    Test Description
                </th>
                <th>
                    RESULT
                </th>
                <th>
                    REFERENCE RANGES
                </th>
            </tr>
            <tr class="test-details-row">
                <td class="test-details-col" style="width: 20%; margin: 10px;">
                    <div style="margin: 10px;">Sickle Cell
                        Anemia
                        <div class="test-method">(Method: HPOS)</div>
                    </div>
                </td>
                <td style="width: 30%;">
                    <div class="result-value">Ra = 0.16</div>
                    <!-- <div class="test-cell-div">Normal</div>
                    <div class="test-cell-div">Sickle Cell Trait</div>
                    <div class="test-cell-div">Sickle Cell Disease</div>
                    <div class="test-cell-div">Negative Borderline</div>
                    <div class="test-cell-div">Positive Borderline</div> -->
                </td>
                <td style="width: 50%;">
                    <div class="test-cell-div">
                        < 0.16: Normal (HbA)</div>
                            <div class="test-cell-div">0.165 – 0.235: Sickle-cell Trait (HbAS)</div>
                            <div class="test-cell-div">> 0.24: Sickle-cell Disease (HbSS)</div>
                            <div class="test-cell-div">0.16-0.165: Inconclusive (Negative Borderline)</div>
                            <div class="test-cell-div">0.235 – 0.24: Inconclusive (Positive Borderline)</div>
                </td>
                <!-- <td style="width: 25%;">
                    <div class="test-cell-div">Normal</div>
                    <div class="test-cell-div">Sickle Cell Trait</div>
                    <div class="test-cell-div">Sickle Cell Disease</div>
                    <div class="test-cell-div">Recommended for HPLC or Electrophoresis Tests</div>
                    <div class="test-cell-div">Recommended for HPLC or Electrophore</div>
                </td> -->
            </tr>
        </table>
    </div>

    <div>
        <!-- <div style="font-weight: 600; margin: 10px;">INTERPRETATION:</div> -->

        <div style="margin: 10px;">
            <strong>Test Principle:</strong> This point of care quantitative diagnostic test for sickle-cell anemia
            works on the principle of absorption
            spectroscopy. The test helps in differentiating heterozygous/homozygous hemoglobin from normal hemoglobin.
        </div>

        <div style="margin: 10px;">
            <strong>Method:</strong> High Performance Optical Spectroscopy (HPOS) for detection of Sickle cell trait and
            sickle cell disease in whole blood capillary blood samples.
        </div>

        <div style="margin: 10px;">
            <strong> Note:</strong>
            <!-- <ul>
                <li>a. Blood transfusion may have an impact on the test results.</li>

                <li>
                    b. Patients already on sickle-cell medications may impact test results.
                </li>
            </ul> -->

            Borderline cases are reported as inconclusive. It may occur due to several factors such as medication,
            transfusion, field conditions and assay process. Further clinical tests are recommended in these cases for
            diagnosis.
        </div>

        <!-- <div
            style="margin: 80px 10px 20px 50px; width: 88%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
            <div style="margin: 5px;">DATE:</div>
            <div style="margin: 5px;">Hematologist</div>
        </div> -->

        <!-- <div style="margin: 30px;">
            This report is for the perusal of doctor only. Not for medico legal cases. Clinical correlation is
            essential.
            Please contact us in case of unexpected result.
        </div> -->
        <div style="height: 3px;width: 98%; background-color: black; margin-top: 150px;"></div>
        <div class="end-of-report">
            *** END OF REPORT ***</div>
        <div style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
            <div style="font-style: italic; color: rgb(191, 191, 191);">
                This is an electronically generated report. Generated at HH:MM hrs on DD-MMM-YYYY.
            </div>
            <div>
                Note: Assay results should be correlated clinically with other clinical findings
            </div>
        </div>
    </div>
</body>

</html>
-												add report html template

	- change arduino stub output to generate error

											
										
										
											2023-08-06 13:55:17 +05:30
+								<!DOCTYPE html>
 								<html>
-												add text content in template

											
										
										
											2023-08-06 14:01:52 +05:30
-												add report html template

	- change arduino stub output to generate error

											
										
										
											2023-08-06 13:55:17 +05:30
+								<head>
-												add text content in template

											
										
										
											2023-08-06 14:01:52 +05:30
+								    <style>
-												add colors for print

											
										
										
											2023-08-07 13:41:09 +05:30
+								        @media print {
 								            body {
 								                -webkit-print-color-adjust: exact;
 								            }
 								        }
-												add text content in template

											
										
										
											2023-08-06 14:01:52 +05:30
+								        .person-details-row {
 								            display: flex;
 								            flex-direction: row;
 								        }
 								        .person-details-col {
 								            display: flex;
 								            flex-direction: column;
 								            height: 90px;
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								            width: 50%;
 								            margin: 1px;
 								            border: 0;
-												add text content in template

											
										
										
											2023-08-06 14:01:52 +05:30
+								        }
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								        .test-details-row {
 								            border: 0;
 								        }
-												add text content in template

											
										
										
											2023-08-06 14:01:52 +05:30
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								        .test-details-col {
-												iadd logo

											
										
										
											2023-08-07 13:33:16 +05:30
+								            height: 100px;
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								        }
-												add text content in template

											
										
										
											2023-08-06 14:01:52 +05:30
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								        .test-cell-div {
-												update to new format

											
										
										
											2023-08-07 13:12:36 +05:30
+								            /* border: 1px solid black; */
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								            border-collapse: collapse;
-												iadd logo

											
										
										
											2023-08-07 13:33:16 +05:30
+								            height: 20px;
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								            padding: 10px;
 								        }
-												add text content in template

											
										
										
											2023-08-06 14:01:52 +05:30
-												update to new format

											
										
										
											2023-08-07 13:12:36 +05:30
+								        .table-header {
 								            border: 1px solid black;
 								            margin: 0 0 -10px 10px;
 								            background-color: rgb(191, 191, 191);
 								            text-align: center;
 								            justify-content: center;
 								            align-items: center;
 								            display: flex;
 								            font-weight: 600;
 								            height: 50px;
 								            width: 98%;
 								        }
-												add colors for print

											
										
										
											2023-08-07 13:41:09 +05:30
+								        @media print {
 								            .table-header {
 								                background-color: rgb(191, 191, 191) !important;
 								                print-color-adjust: exact;
 								            }
 								        }
 								        @media print {
 								            .vendorListHeading th {
 								                color: white !important;
 								            }
 								        }
-												update to new format

											
										
										
											2023-08-07 13:12:36 +05:30
+								        .test-method {
-												update report text

											
										
										
											2023-08-07 14:19:50 +05:30
+								            font-weight: 200 !important;
 								            color: rgb(191, 191, 191);
-												update to new format

											
										
										
											2023-08-07 13:12:36 +05:30
+								        }
 								        .result-value {
 								            justify-content: center;
 								            align-items: center;
 								            display: flex;
 								        }
-												iadd logo

											
										
										
											2023-08-07 13:33:16 +05:30
-												update to new format

											
										
										
											2023-08-07 13:12:36 +05:30
+								        .end-of-report {
 								            display: flex;
 								            align-items: center;
 								            justify-content: center;
 								        }
-												iadd logo

											
										
										
											2023-08-07 13:33:16 +05:30
+								        .logo {
 								            display: flex;
 								            justify-content: center;
 								            align-items: center;
 								        }
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								        table,
 								        th,
 								        td {
 								            border: 1px solid black;
 								            border-collapse: collapse;
 								        }
-												add text content in template

											
										
										
											2023-08-06 14:01:52 +05:30
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								        ul {
 								            list-style-type: none;
 								            /* margin: 0; */
 								            /* padding: 0; */
 								        }
 								    </style>
 								</head>
-												add text content in template

											
										
										
											2023-08-06 14:01:52 +05:30
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								<body>
-												iadd logo

											
										
										
											2023-08-07 13:33:16 +05:30
+								    <div>
 								        <div class="logo">
 								            <img src="./logo_nobg.png" width="128" height="128" alt="sickle cell logo" />
 								        </div>
 								        <table style="border: 1px solid black; margin: 10px; width: 98%;">
 								            <tr class="person-details-row">
 								                <td class="person-details-col" style="border-right: 2; width: 70%;">
 								                    <div><strong>Name:</strong></div>
 								                    <div><strong>Age / Gender:</strong></div>
 								                    <div><strong>Sample type:</strong></div>
 								                    <div><strong>Family History of Sickle Cell Anemia:</strong></div>
 								                </td>
 								                <td class="person-details-col" style="width: 30%;">
 								                    <div><strong>Marital Status:</strong></div>
 								                    <div><strong>Test Date:</strong></div>
-												italic

											
										
										
											2023-08-07 15:15:41 +05:30
+								                    <div><strong>Patient ID:</strong></div>
-												iadd logo

											
										
										
											2023-08-07 13:33:16 +05:30
+								                    <div><strong>Sample ID:</strong></div>
 								                </td>
 								            </tr>
 								        </table>
 								    </div>
-												fix two page problem

											
										
										
											2023-08-07 14:08:58 +05:30
+								    <div style="height: 2px;width: 98%; background-color: rgb(56, 105, 166); margin: 30px 10px 40px 10px;"></div>
-												iadd logo

											
										
										
											2023-08-07 13:33:16 +05:30
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								    <div>
-												update to new format

											
										
										
											2023-08-07 13:12:36 +05:30
+								        <div class="table-header">POINT OF CARE SICKLE CELL ANEMIA TEST</div>
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								        <table class="test-details-table" style="border: 1px solid black; margin: 10px; width: 98%;">
 								            <tr style="height: 50px;">
 								                <th>
 								                    Test Description
 								                </th>
 								                <th>
 								                    RESULT
 								                </th>
 								                <th>
-												update to new format

											
										
										
											2023-08-07 13:12:36 +05:30
+								                    REFERENCE RANGES
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								                </th>
 								            </tr>
 								            <tr class="test-details-row">
-												add colors for print

											
										
										
											2023-08-07 13:41:09 +05:30
+								                <td class="test-details-col" style="width: 20%; margin: 10px;">
-												update to new format

											
										
										
											2023-08-07 13:12:36 +05:30
+								                    <div style="margin: 10px;">Sickle Cell
 								                        Anemia
 								                        <div class="test-method">(Method: HPOS)</div>
 								                    </div>
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								                </td>
-												add colors for print

											
										
										
											2023-08-07 13:41:09 +05:30
+								                <td style="width: 30%;">
-												update to new format

											
										
										
											2023-08-07 13:12:36 +05:30
+								                    <div class="result-value">Ra = 0.16</div>
 								                    <!-- <div class="test-cell-div">Normal</div>
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								                    <div class="test-cell-div">Sickle Cell Trait</div>
 								                    <div class="test-cell-div">Sickle Cell Disease</div>
 								                    <div class="test-cell-div">Negative Borderline</div>
-												update to new format

											
										
										
											2023-08-07 13:12:36 +05:30
+								                    <div class="test-cell-div">Positive Borderline</div> -->
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								                </td>
-												add colors for print

											
										
										
											2023-08-07 13:41:09 +05:30
+								                <td style="width: 50%;">
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								                    <div class="test-cell-div">
-												update to new format

											
										
										
											2023-08-07 13:12:36 +05:30
+								                        < 0.16: Normal (HbA)</div>
 								                            <div class="test-cell-div">0.165 – 0.235: Sickle-cell Trait (HbAS)</div>
 								                            <div class="test-cell-div">> 0.24: Sickle-cell Disease (HbSS)</div>
 								                            <div class="test-cell-div">0.16-0.165: Inconclusive (Negative Borderline)</div>
 								                            <div class="test-cell-div">0.235 – 0.24: Inconclusive (Positive Borderline)</div>
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								                </td>
-												update to new format

											
										
										
											2023-08-07 13:12:36 +05:30
+								                <!-- <td style="width: 25%;">
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								                    <div class="test-cell-div">Normal</div>
 								                    <div class="test-cell-div">Sickle Cell Trait</div>
 								                    <div class="test-cell-div">Sickle Cell Disease</div>
 								                    <div class="test-cell-div">Recommended for HPLC or Electrophoresis Tests</div>
 								                    <div class="test-cell-div">Recommended for HPLC or Electrophore</div>
-												update to new format

											
										
										
											2023-08-07 13:12:36 +05:30
+								                </td> -->
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								            </tr>
 								        </table>
 								    </div>
-												add report html template

	- change arduino stub output to generate error

											
										
										
											2023-08-06 13:55:17 +05:30
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								    <div>
-												update to new format

											
										
										
											2023-08-07 13:12:36 +05:30
+								        <!-- <div style="font-weight: 600; margin: 10px;">INTERPRETATION:</div> -->
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
 								        <div style="margin: 10px;">
-												update report text

											
										
										
											2023-08-07 14:19:50 +05:30
+								            <strong>Test Principle:</strong> This point of care quantitative diagnostic test for sickle-cell anemia
 								            works on the principle of absorption
 								            spectroscopy. The test helps in differentiating heterozygous/homozygous hemoglobin from normal hemoglobin.
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								        </div>
 								        <div style="margin: 10px;">
-												update report text

											
										
										
											2023-08-07 14:19:50 +05:30
+								            <strong>Method:</strong> High Performance Optical Spectroscopy (HPOS) for detection of Sickle cell trait and
 								            sickle cell disease in whole blood capillary blood samples.
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								        </div>
 								        <div style="margin: 10px;">
 								            <strong> Note:</strong>
-												update report text

											
										
										
											2023-08-07 14:19:50 +05:30
+								            <!-- <ul>
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								                <li>a. Blood transfusion may have an impact on the test results.</li>
 								                <li>
 								                    b. Patients already on sickle-cell medications may impact test results.
 								                </li>
-												update report text

											
										
										
											2023-08-07 14:19:50 +05:30
+								            </ul> -->
 								            Borderline cases are reported as inconclusive. It may occur due to several factors such as medication,
 								            transfusion, field conditions and assay process. Further clinical tests are recommended in these cases for
 								            diagnosis.
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								        </div>
-												italic

											
										
										
											2023-08-07 15:15:41 +05:30
+								        <!-- <div
-												fix two page problem

											
										
										
											2023-08-07 14:08:58 +05:30
+								            style="margin: 80px 10px 20px 50px; width: 88%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								            <div style="margin: 5px;">DATE:</div>
 								            <div style="margin: 5px;">Hematologist</div>
-												italic

											
										
										
											2023-08-07 15:15:41 +05:30
+								        </div> -->
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
-												update report text

											
										
										
											2023-08-07 14:19:50 +05:30
+								        <!-- <div style="margin: 30px;">
-												format the template

											
										
										
											2023-08-06 15:25:56 +05:30
+								            This report is for the perusal of doctor only. Not for medico legal cases. Clinical correlation is
 								            essential.
 								            Please contact us in case of unexpected result.
-												update report text

											
										
										
											2023-08-07 14:19:50 +05:30
+								        </div> -->
-												italic

											
										
										
											2023-08-07 15:15:41 +05:30
+								        <div style="height: 3px;width: 98%; background-color: black; margin-top: 150px;"></div>
-												update to new format

											
										
										
											2023-08-07 13:12:36 +05:30
+								        <div class="end-of-report">
 								            *** END OF REPORT ***</div>
-												fix two page problem

											
										
										
											2023-08-07 14:08:58 +05:30
+								        <div style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
-												italic

											
										
										
											2023-08-07 15:15:41 +05:30
+								            <div style="font-style: italic; color: rgb(191, 191, 191);">
-												fix two page problem

											
										
										
											2023-08-07 14:08:58 +05:30
+								                This is an electronically generated report. Generated at HH:MM hrs on DD-MMM-YYYY.
 								            </div>
 								            <div>
 								                Note: Assay results should be correlated clinically with other clinical findings
 								            </div>
-												update to new format

											
										
										
											2023-08-07 13:12:36 +05:30
+								        </div>
-												add text content in template

											
										
										
											2023-08-06 14:01:52 +05:30
+								    </div>
-												add report html template

	- change arduino stub output to generate error

											
										
										
											2023-08-06 13:55:17 +05:30
+								</body>
-												iadd logo

											
										
										
											2023-08-07 13:33:16 +05:30
+								</html>