this is html code
Print Format Report</div>
<!-- Cover Page -->
<div class="report-container">
<img class="cover" src="/files/cover-fzZeLcKZ5-transformed.png" alt="Logo">
</div>
<!--Summary Page-->
<div class="report-content">
<div class="header-3">
<img src="/files/header-0.png"alt="Header Image">
</div>
<div class="summary-container">
<img src="/files/summary.png" class="summary-image" alt="Summary Title">
<div class="summary-box">
<p class="content-qr">Download it</p>
</div>
</div>
<table class="Summary-table">
<tr>
<td colspan="3" style=" white-space: nowrap;">
<strong>Braxtone Reference No:</strong>
<p>{{ doc.braxtone_reference_number }}</p>
</td>
</tr>
<tr>
<td colspan="3">
<strong>Date:</strong>
<p>{{ doc.date}}</p>
</td>
</tr>
<tr>
<td colspan="3">
<strong>Vehicle:</strong>
<p>{{ doc.vehicle }}</p>
</td>
</tr>
<tr>
<td colspan="3">
<strong>Company Name:</strong>
<p>{{ doc.insurance_company }}</p>
</td>
</tr>
<tr>
<td colspan="3">
<strong>Owner:</strong>
<p>{{ doc.vehicle_owner }}</p></td>
</tr>
<tr>
<td colspan="3">
<strong>Chassis No:</strong>
<p>{{ frappe.db.get_value("Vehicle Details", doc.vehicle, "chassis_no") }}</p>
</td>
</tr>
<tr>
<td colspan="3">
<strong>Mileage:</strong>
<p>{{ doc.mileage }}</p>
</td>
</tr>
<tr>
<td colspan="3">
<strong>Specifications:</strong>
<p>{% if frappe.db.get_value("Vehicle Details", doc.vehicle, "gcc") %}GCC{% else %}Not GCC{% endif %}</p>
</td>
</tr>
<tr>
<td colspan="3">
Vehicle map:
<div style="text-align: center;">
<img src="{{ doc.map_vehicle }}" alt="Signature" style="width: 50%; height: 50%;">
</div>
</tr>
<tr>
<td colspan="3"><strong>Market Value: </strong>
<p>{{doc.market_value}}</p>
</td>
</tr>
</table>
<!--Basic Details And Policy-->
<div class="report-content">
<div class="header-3">
<img src="/files/header-0.png"alt="Header Image">
</div>
<img src ="/files/basic.png" style = "width:35%; margin-bottom:80px; margin-left:80px" alt ="basic Title">
<table class="bd-table" style = "width:60%;">
<tr>
<td colspan="3">
<strong>Braxtone Reference No:</strong>
<p>{{ doc.braxtone_reference_number }}</p></td>
</tr>
<tr>
<td colspan="3">
<strong>Date:</strong>
<p>{{ doc.date}}</p>
</td>
</tr>
<tr>
<td colspan="3">
<strong>Vehicle:</strong>
<p>{{ doc.vehicle }}</p>
</td>
</tr>
<tr>
<td colspan="3">
<strong>Insurance Company:</strong>
<p>{{ doc.insurance_company }}</p>
</td>
</tr>
<tr>
<td colspan="3">
<strong>Client Claim Refrence:</strong>
<p>{{ doc.client_claim_reference }}</p>
</td>
</tr>
</table>
<img src ="/files/policy.png" style = "width:35%; margin-bottom:70px; margin-left:80px" alt ="basic Title">
<table class="pd-table" style = "width:60%;">
<tr>
<td colspan="3"><strong>Policy Number:</strong>
<p>{{ doc.policy_number}}</p>
</td>
</tr>
<tr>
<td colspan="3"><strong>Type of Insurance:</strong>
<p>{{ doc.type_of_insurance}}</p>
</td>
</tr>
<tr>
<td colspan="3">
<strong> Policy Issue Date:</strong>
<p>{{ doc.policy_issue_date}}</p>
</td>
</tr>
<tr>
<td colspan="3"><strong>Policy Expiry Date:</strong>
<p>{{ doc.policy_expiry_date }}</p></td>
</tr>
<tr>
<td colspan="3"><strong>Sum Insured:</strong>
<p>{{ doc.sum_insured }}</p>
</td>
</tr>
</table>
</div>
<!--Vehicle Details And Survey-->
<div class="report-content">
<div class="header-3">
<img src="/files/header-0.png"alt="Header Image">
</div>
<img src ="/files/Vehicle.png" style = "width:35%; margin-bottom:80px; margin-left:80px" alt ="basic Title">
<table class="vd-table" style = "width:70%;">
<tr>
<td colspan="3"><strong>Vehicle:</strong>
<p>{{ doc.vehicle }}</p></td>
</tr>
<tr>
<td colspan="3"><strong>Vehicle owner:</strong>
<p>{{ doc.vehicle_owner}}</p></td>
</tr>
<tr>
{% set vehicle_info = doc.vehicle %}
{% set Plate_No= vehicle_info.split(' ')[0] %}
<td colspan="3">
<strong>Vehicle Plate No:</strong>
<p>{{ Plate_No }}</p>
</td>
</tr>
<tr>
<td colspan="3">
<strong>Chassis No:</strong>
<p>{{ frappe.db.get_value("Vehicle Details", doc.vehicle, "chassis_no") }}</p>
</td>
</tr>
<tr>
<td colspan="3">
<strong>Mileage:</strong>
<p>{{doc.mileage}}{% if frappe.db.get_value("Vehicle Details", doc.vehicle, "gcc") %}Km{% else %}m{% endif %}</p>
</td>
</tr>
<tr>
<td colspan="3"><strong>Specifications:</strong>
<p>{% if frappe.db.get_value("Vehicle Details", doc.vehicle, "gcc") %}GCC{% else %}Not GCC{% endif %}</p>
</td>
</tr>
</table>
<img src ="/files/Survey.png" style = "width:35%; margin-bottom:60px; margin-left:80px" alt ="basic Title">
<table class="sd-table" style = "width:70%;">
<tr>
<td colspan="3"><strong>Accident No:</strong>
<p>{{doc.accident_no}}</p></td>
</tr>
<tr>
<td colspan="3">
<strong>Accident Report Issued By:</strong>
<p>{{doc.accident_report_issued_by}}</p></td>
</tr>
<tr>
<td colspan="3">
<strong>Accident Location:</strong>
<p>{{doc.previous_accidents_inside_uae}}</p></td>
</tr>
<tr>
<td colspan="3"><strong>Previous Accidents Inside UAE:</strong>
<p>{{doc.previous_accidents_inside_uae}}</p></td>
</tr>
<tr>
<td colspan="3">
<strong>Previous Accidents Outside UAE:</strong>
<p>{{doc.previous_accidents_outside_uae}}</p></td>
</tr>
</table>
</div>
<!--Current Vehicle Status-->
<div class="report-content">
<div class="header-3">
<img src="/files/header-0.png"alt="Header Image">
</div>
<img src ="/files/cvs-0.png" style = "width:45%; margin-bottom:80px; margin-left:80px" alt ="basic Title">
<table class="cvs-1-table" style = "width:60%; height: 100%;">
<tr>
<td colspan="3"><strong>Vehicle images </br>(Front, Rear, Left , Right)</strong></td>
</tr>
<tr>
<td style="width: 50%; height:70%;" colspan="1"><img class = "page-5-img" src="{{ doc.front_image }}" </td>
<td style="width: 50%;" colspan="1"><img class = "page-5-img" src="{{ doc.back_image }}"</td>
</tr>
<tr>
<td style="width: 50%;" colspan="1"><img class = "page-5-img" src="{{ doc.right_image }}"</td>
<td style="width: 50%;" colspan="1"><img class = "page-5-img" src="{{ doc.left_image }}"</td>
</tr>
</table>
</div>
<!--Current Vehicle Status-2-->
<div class="report-content">
<div class="header-3">
<img src="/files/header-0.png"alt="Header Image">
</div>
<img src ="/files/cvs-0.png" style = "width:45%; margin-bottom:80px; margin-left:80px" alt ="basic Title">
<table class="cvs-1-table" style = "width:60%;">
<tr>
<td colspan="3"><strong>Vehicle images </br>(4 images for accident)</strong></td>
</tr>
<tr>
<td style="width: 50%;" colspan="1"><img class = "page-5-img" src="{{ doc.first_accident_image }}" </td>
<td style="width: 50%;" colspan="1"><img class = "page-5-img" src="{{ doc.second_accident_image }}"</td>
</tr>
<tr>
<td style="width: 50%;" colspan="1"><img class = "page-5-img" src="{{ doc.third_accident_image }}"</td>
<td style="width: 50%;" colspan="1"><img class = "page-5-img" src="{{ doc.forth_accident_image }}"</td>
</tr>
</table>
</div>
<!--Current Vehicle Status And parts-->
<div class="report-content">
<div class="header-3">
<img src="/files/header-0.png"alt="Header Image">
</div>
<img src ="/files/cvs-0.png" style = "width:45%; margin-bottom:80px; margin-left:80px" alt ="basic Title">
<table class="cvs-1-table" style = "width:60%; height: 35%;">
<tr>
<td colspan="3"><strong>Vehicle images<br>(Chassis & Milage)</strong></td>
</tr>
<tr>
<td colspan="1"><img class="page-7-img" src="{{ doc.chassis_attach_image }}" alt="Chassis Image"></td>
<td colspan="1"><img class="page-7-img" src="{{ doc.milage_attach_image }}" alt="Milage Image"></td>
</tr>
</table>
<img src ="/files/Parts.png" style = "width:30%; margin-bottom:80px; margin-left:80px" alt ="basic Title">
<table class="part-table">
<tr>
<th>No</th>
<th>Part</th>
<th>Group</th>
<th>Status</th>
</tr>
{% for row in doc.parts %}
<tr>
<td>{{ row.idx }}</td>
<td>{{ row.part }}</td>
<td>{{ row.group }}</td>
<td>{{ row.status }}</td>
</tr>
{% endfor %}
</table>
</div>
<!-- Report Section -->
<div class="report-content">
<div class="header-3">
<img src="/files/header-0.png"alt="Header Image">
</div>
<img src ="/files/report-section49876f.png" style = "width:35%; margin-bottom:80px; margin-left:80px" alt ="Summury Title">
<table class="report-table">
{% for row in doc.description_table %}
<tr>
<td colspan="3"><strong>{{ row.title }}</strong></td>
</tr>
<tr>
<td colspan="3">{{ row.description }}</td>
</tr>
{% endfor %}
</table>
<!--<div class = "footer">-->
<!-- <p class="p-footer">Braxtone Surveyors and Loss Adjusters L.L.C.</p>-->
<!-- <p class="p-footer-p">Regulated under UAE Federal Law No. 6, Central Bank of the UAE No. 251 | Commercial License No. 804526</p>-->
<!--</div>-->
<!-- Last Page -->
<div class="report-content">
<div class="header-3">
<img src="/files/header-0.png"alt="Header Image">
</div>
<div class="box">
<img src="/files/boxa0ff2b.png"alt="Header Image" style="width:70%;">
</div>
<div class= "services">
<img src="/files/Screenshot from 2024-07-11 09-34-49.png"alt="Header Image" style="width:80%;">
</div>
</div>
{{ _("Page") }} {{ _("of") }}
This is css code
@font-face {
font-family: ‘Futura’;
src: url(‘/public/files/fonts/futura/FuturaLT-Book.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}
body {
font-family: ‘FuturaBook’, sans-serif;
margin: 0;
padding: 0;
}
/*.letter-head-footer{margin-left:25mm;margin-right:20mm;position: absolute; bottom: 9mm}*/
.report-container {
page-break-after: always; /* Force page break after this container */
}
.cover {
height: 15.213in !important;
max-height: 15.213in;
max-width: 100%; /* Ensure cover image doesn't exceed page width */
height: auto; /* Maintain aspect ratio */
}
.report-content {
page-break-before: always; /* Force page break before this content */
clear: both; /* Clear floating elements */
font-family:'FuturaBook';
}
.header-3 {
display: block; /* Ensure header is visible by default */
width:100% !important;
}
.report-table {
width: 60%;
border-collapse: collapse;
margin-bottom: 20px;
}
table, th, td {
border: 1.5px solid #0067a1;
border-collapse: collapse;
font-size:20px;
color: black;
align-items:center;
align-content:center;
margin: 0 auto;
margin-top:-2em;
}
.content-8 {
margin-top: 20px; /* Add margin between sections */
}
.report-table tr {
page-break-inside: avoid; /* Avoid splitting rows across pages */
}
@media print {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.report-container {
height: 100%;
page-break-after: always; /* Force page break after cover */
}
.report-content {
page-break-before: always; /* Ensure report content starts on a new page */
}
.last-page {
page-break-before: always; /* Ensure last page starts on a new page */
}
.letter-head {
/* Display the letterhead on every page except the cover page */
display: none;
}
}
.h2{
color:#0067a1;
font-family: 'FuturaLT-Book';
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
}
.part-table th {
background-color: #0067a1;
color: white;
}
.summary-container {
display: flex;
align-items: center;
gap: 20px 7000px;
}
.summary-image {
width: 35%;
margin-right: 38%;
margin-top:15px;
}
.summary-box {
border: 1.5px solid #0067a1;
width: 160px;
height:160px;
display: flex;
justify-content: center;
}
.content-qr {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
height: 100%;
font-size:15px;
}
.box{
justify-content: center;
align-items: center;
display: flex;
margin:60px;
}
.services{
justify-content: center;
align-items: center;
display: flex;
}
.page-5-img{
height: 400px;
width:500px;
}
.page-7-img{
height: 200px;
width:400px;
}
.p-footer{
color:#0067a1;
font-weight: bold;
padding-left:59.2%;
padding-top:2%;
}
.p-footer-p{
color:#0067a1;
padding-left:21%;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
text-align: center;
}
i want to fixed header and footer and reply for all page. when i put the footer wit fixed position it take the footer just for cover page