update the plain mail format to look plain (#10)

* move the table out and iframe it in so it's actually plain

* make it a single table with no theads

* make copy button work with iframed table

* taller frame
This commit is contained in:
2023-12-09 12:23:36 +05:30
committed by GitHub
parent 81ab201d42
commit 56de8bbb05
2 changed files with 78 additions and 72 deletions

View File

@@ -14,9 +14,10 @@ desc: >
<div>
<script type="module">
const btn = document.getElementById('copybtn');
const frame = document.querySelector('iframe').contentWindow;
btn.addEventListener("click", ()=> {
window.getSelection().selectAllChildren(document.querySelector('article'));
document.execCommand('copy');
frame.getSelection().selectAllChildren(frame.document.querySelector('table'));
frame.document.execCommand('copy');
btn.innerText = 'COPIED!';
btn.disabled = true;
setTimeout(()=>{btn.disabled = false; btn.innerText = 'COPY'},3000)
@@ -26,73 +27,4 @@ desc: >
</div>
</header>
<article>
<table>
<thead>
<tr><th>Student Details</th></tr>
</thead>
<tbody>
<tr>
<td>Semester</td><td>II</td>
</tr><tr>
<td>Name of the Student</td><td></td>
</tr><tr>
<td>Course/Programme</td><td></td>
</tr><tr>
<td>Roll Number</td><td></td>
</tr><tr>
<td>Category</td><td>General / EWS / OBC / WDP / SC / ST / VHC / PHC</td>
</tr><tr>
</tr>
<tr><td>Phone Number</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>Payment Details</th></tr>
</thead>
<tbody>
<tr>
<td>Name of Account Holder</td><td></td>
</tr>
<tr>
<td>Account Number</td><td></td>
</tr>
<tr>
<td>Name of the Bank</td><td></td>
</tr>
<tr>
<td>Branch</td><td></td>
</tr>
<tr>
<td>IFSC Code</td><td></td>
</tr>
<tr>
<td>Amount Paid</td><td></td>
</tr>
<tr>
<td>Date of Payment</td><td></td>
</tr>
<tr>
<td>Payment Mode</td><td>SBI to SBI / NEFT / IMPS / UPI</td>
</tr>
<tr>
<td>Transaction Number</td><td></td>
</tr>
<tr>
<td>Reference Number</td><td></td>
</tr>
<tr>
<td>UTR Number</td><td></td>
</tr>
<tr>
<td>INB Reference Number <small>(SBI to SBI)</small></td><td></td>
</tr>
<tr>
<td>Challan Number</td><td></td>
</tr>
</tbody>
</table>
</article>
<iframe src="./plainformat" width="100%" height="600px"></iframe>

View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<style>
table { border-collapse: collapse; margin-bottom: 5px; }
td { border: solid #9a9a9a 1px; padding: 3px 5px; }
th { text-align: left; padding: 7px 5px;}
</style>
<table>
<tbody>
<tr><th colspan="2">Student Details</th></tr>
<tr>
<td>Semester</td><td>II</td>
</tr><tr>
<td>Name of the Student</td><td></td>
</tr><tr>
<td>Course/Programme</td><td></td>
</tr><tr>
<td>Roll Number</td><td></td>
</tr><tr>
<td>Category</td><td>General / EWS / OBC / WDP / SC / ST / VHC / PHC</td>
</tr>
<tr><td>Phone Number</td><td></td>
</tr>
<tr><th colspan="2">Payment Details</th></tr>
<tr>
<td>Name of Account Holder</td><td></td>
</tr>
<tr>
<td>Account Number</td><td></td>
</tr>
<tr>
<td>Name of the Bank</td><td></td>
</tr>
<tr>
<td>Branch</td><td></td>
</tr>
<tr>
<td>IFSC Code</td><td></td>
</tr>
<tr>
<td>Amount Paid</td><td></td>
</tr>
<tr>
<td>Date of Payment</td><td></td>
</tr>
<tr>
<td>Payment Mode</td><td>SBI to SBI / NEFT / IMPS / UPI</td>
</tr>
<tr>
<td>Transaction Number</td><td></td>
</tr>
<tr>
<td>Reference Number</td><td></td>
</tr>
<tr>
<td>UTR Number</td><td></td>
</tr>
<tr>
<td>INB Reference Number <small>(SBI to SBI)</small></td><td></td>
</tr>
<tr>
<td>Challan Number</td><td></td>
</tr>
</tbody>
</table>
</body>
</html>