<!DOCTYPE html>
<html>
<head>
<style>
@page { size: A4; margin: 0; }
body { margin: 0; padding: 0; background-color: #f0f0f0; font-family: 'Times New Roman', serif; }
.page {
width: 210mm; height: 297mm;
background-color: #F7E38B; /* Realistic yellow tint from IMG_1784.jpg */
margin: 10mm auto;
box-sizing: border-box;
padding: 15mm 15mm 15mm 40mm; /* Extra 40mm on Left for Binding */
position: relative;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
h1 { text-align: center; font-size: 28pt; margin-bottom: 20px; font-weight: normal; letter-spacing: 2px; }
table { width: 100%; border-collapse: collapse; background-color: white; }
th {
background-color: #F4D03F; /* Header color from IMG_1784.jpg */
border: 1px solid #000;
padding: 8px; font-size: 12pt; font-weight: normal;
}
td { border: 1px solid #ccc; height: 28px; }
/* Column Widths based on IMG_1784.jpg */
.col-sl { width: 40px; }
.col-date { width: 80px; }
.col-name { width: auto; }
.col-page { width: 60px; }
.col-init { width: 60px; }
.col-rem { width: 80px; }
.continued { text-align: right; margin-top: 10px; font-size: 11pt; font-style: italic; }
/* Certificate section for the second page (IMG_1785.jpg) */
.cert-box {
margin-top: 30px;
padding: 20px;
background-color: rgba(255,255,255,0.6);
line-height: 2;
font-size: 13pt;
}
.line { border-bottom: 1px dotted #000; display: inline-block; }
</style>
</head>
<body>
<!-- PAGE 1 (Standard Index) -->
<div class="page">
<h1>INDEX</h1>
<table>
<thead>
<tr>
<th class="col-sl">Sl. No.</th>
<th class="col-date">Date</th>
<th class="col-name">Name of the Experiment</th>
<th class="col-page">Page No.</th>
<th class="col-init">Initial</th>
<th class="col-rem">Remarks</th>
</tr>
</thead>
<tbody>
<!-- Generating empty rows -->
<script>
for(let i=0; i<24; i++) {
document.write("<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
}
</script>
</tbody>
</table>
<p class="continued">Continued...</p>
</div>
<!-- PAGE 2 (With Certificate - IMG_1785.jpg style) -->
<div class="page">
<table>
<thead>
<tr>
<th class="col-sl">Sl. No.</th>
<th class="col-date">Date</th>
<th class="col-name">Name of the Experiment</th>
<th class="col-page">Page No.</th>
<th class="col-init">Initial</th>
<th class="col-rem">Remarks</th>
</tr>
</thead>
<tbody>
<script>
for(let i=0; i<12; i++) {
document.write("<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
}
</script>
</tbody>
</table>
<div class="cert-box">
This is to Certify that Mr./Miss <span class="line" style="width:350px;"></span> <br>
A Student of Class <span class="line" style="width:80px;"></span> Roll No. <span class="line" style="width:80px;"></span> Reg. No. <span class="line" style="width:100px;"></span> ID No. <span class="line" style="width:100px;"></span> <br>
School/College <span class="line" style="width:400px;"></span> has Performed the Required Number of Experiments in Physics during the Session 20 <span class="line" style="width:50px;"></span> <br>
Department of <span class="line" style="width:300px;"></span> <br><br>
<div style="display:flex; justify-content: space-between; margin-top: 20px;">
<span>Date: <span class="line" style="width:120px;"></span></span>
<span style="border-top: 1px solid #000; width: 200px; text-align:center;">Head of the Department</span>
</div>
</div>
</div>
</body>
</html>