<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Expression of Interest (EOI) - SNI & RNI</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
@page {
size: A4;
margin: 0; /* Reset default margins */
}
@media print {
body {
margin: 0;
}
body * {
visibility: hidden;
}
.print-area, .print-area * {
visibility: visible;
}
.print-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0 15mm; /* Side margins */
}
.print-area > div:first-child {
margin-top: 30mm; /* Ensure first element respects header */
}
.print-area > div:last-child {
margin-bottom: 15mm; /* Ensure last element respects footer */
}
.print-area section,
.print-area hr,
.print-area .grid,
.print-area .signatures {
page-break-inside: avoid;
}
.declaration {
page-break-before: always; /* Force Declaration to new page */
}
.signatures {
page-break-before: always; /* Force Signatures to new page */
}
#qrcode-student canvas, #qrcode-office canvas {
display: block !important;
}
.signature-box {
width: 80mm;
height: 20mm;
border: 2px solid #000;
position: relative;
}
.signature-box::before {
content: "Sign Here";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #aaa;
font-size: 12px;
font-style: italic;
}
.seal-box {
width: 80mm;
height: 15mm; /* Reduced height for seal */
border: 2px solid #000;
position: relative;
}
.seal-box::before {
content: "Place Seal Here";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #aaa;
font-size: 12px;
font-style: italic;
}
.signature-row-1 {
gap: 40mm; /* 4cm horizontal gap for first row */
}
.signature-row-2 {
gap: 70mm; /* 7cm horizontal gap for second row */
margin-top: 30mm; /* Increased to 3cm between rows */
}
}
.required:after {
content: " *";
color: red;
}
input, select {
font-size: 12px !important;
}
</style>
</head>
<body class="bg-gray-100 p-4">
<div class="max-w-4xl mx-auto w-full">
<div class="flex gap-4 mb-4 print:hidden">
<button id="print-btn" class="px-3 py-1 bg-blue-600 text-white rounded-full hover:bg-blue-700 text-sm">🖨️ Print</button>
<button id="download-btn" class="px-4 py-1 bg-green-600 text-white rounded-full hover:bg-green-700 text-sm">📥 Download PDF</button>
</div>
<div id="form-section" class="bg-white p-4 shadow-lg rounded-xl print-area">
<div>
<h1 class="text-xl font-semibold mb-2 text-center">Expression of Interest (EOI)</h1>
<div class="grid grid-cols-1 gap-2">
<div>
<label class="block font-semibold text-sm mb-1 required">Select Institution:</label>
<label class="text-sm"><input type="checkbox" id="sni"> Sainthia Nursing Institute (SNI)</label><br>
<label class="text-sm"><input type="checkbox" id="rni"> Rampurhat Nursing Institution (RNI)</label><br>
<label class="text-sm"><input type="checkbox" id="ncp-mcp"> Natural College of Pharmacy / Mayurakshi College of Pharmacy (NCP/MCP)</label><br>
<label class="text-sm"><input type="checkbox" id="svuce-nce"> Swami Vivekananda Universal College of Education / Natural College of Education (SVUCE/NCE)</label>
</div>
</div>
<hr class="my-2">
<h2 class="text-lg font-semibold mb-1">Student Details</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
<div>
<label class="block font-semibold text-sm mb-1 required">Full Name:</label>
<input type="text" id="fullName" placeholder="Full Name *" class="border p-1 rounded w-full">
</div>
<div>
<label class="block font-semibold text-sm mb-1 required">Guardian's Name:</label>
<input type="text" id="guardianName" placeholder="Guardian's Name *" class="border p-1 rounded w-full">
</div>
<div>
<label class="block font-semibold text-sm mb-1">Date of Birth:</label>
<input type="date" id="dob" class="border p-1 rounded w-full">
</div>
<div>
<label class="block font-semibold text-sm mb-1 required">Gender:</label>
<select id="gender" class="border p-1 rounded w-full">
<option value="">Gender *</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
<div class="md:col-span-2">
<label class="block font-semibold text-sm mb-1 required">Address:</label>
<input type="text" id="address" placeholder="Address *" class="border p-1 rounded w-full">
</div>
<div>
<label class="block font-semibold text-sm mb-1 required">Student Mobile:</label>
<input type="text" id="mobile" placeholder="Student Mobile *" class="border p-1 rounded w-full" maxlength="10">
</div>
<div>
<label class="block font-semibold text-sm mb-1">Alternate Contact:</label>
<input type="text" id="altContact" placeholder="Alternate Contact" class="border p-1 rounded w-full" maxlength="10">
</div>
<div>
<label class="block font-semibold text-sm mb-1">Email ID:</label>
<input type="text" id="email" placeholder="Email ID" class="border p-1 rounded w-full">
</div>
<div>
<label class="block font-semibold text-sm mb-1 required">Course Applied For:</label>
<select id="appliedCourse" class="border p-1 rounded w-full">
<option value="">Course Applied For *</option>
<option>GNM (3 Years)</option>
<option>B.Sc Nursing (4 Years)</option>
<option>D.Pharma</option>
<option>D.El.Ed</option>
<option>B.Ed</option>
<option>School</option>
</select>
</div>
<div>
<label class="block font-semibold text-sm mb-1 required">Academic Year:</label>
<input type="text" id="academicYear" placeholder="Academic Year (e.g., 2025-2029) *" class="border p-1 rounded w-full">
</div>
<div>
<label class="block font-semibold text-sm mb-1 required">Date of Application:</label>
<input type="date" id="applicationDate" placeholder="Date of Application *" class="border p-1 rounded w-full">
</div>
</div>
<hr class="my-2">
<h2 class="text-lg font-semibold mb-1">Payment & Transaction Details</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
<div>
<label class="block font-semibold text-sm mb-1 required">Amount Paid (₹):</label>
<input type="text" id="amount" placeholder="Amount Paid (₹) *" class="border p-1 rounded w-full">
</div>
<div>
<label class="block font-semibold text-sm mb-1 required">Date of Payment:</label>
<input type="date" id="paymentDate" placeholder="Date of Payment *" class="border p-1 rounded w-full">
</div>
<div>
<label class="block font-semibold text-sm mb-1 required">Payment Mode:</label>
<input type="text" id="paymentMode" placeholder="Payment Mode *" class="border p-1 rounded w-full">
</div>
<div>
<label class="block font-semibold text-sm mb-1 required">Transaction/UPI ID:</label>
<input type="text" id="txnId" placeholder="Transaction/UPI ID *" class="border p-1 rounded w-full" maxlength="12">
</div>
</div>
<div class="mt-2 flex gap-4">
<div class="flex-1">
<h2 class="text-lg font-semibold mb-1">Terms & Conditions</h2>
<ul class="list-disc list-inside space-y-1 text-sm">
<li>Booking amount will be adjusted with admission fee.</li>
<li>Refundable before admission deadline.</li>
<li>Booking doesn't confirm final admission.</li>
</ul>
</div>
<div class="flex-none">
<label class="text-sm font-semibold">Student Copy</label>
<div class="flex gap-3 mt-1">
<div>
<label class="text-sm font-semibold">Form ID:</label>
<p class="text-sm text-gray-600" id="form-id-student"></p>
</div>
<div id="qrcode-student"></div>
</div>
</div>
</div>
</div>
<div>
<hr class="my-2">
<h2 class="text-lg font-semibold mb-1">Office Use Only</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
<div>
<label class="block font-semibold text-sm mb-1">Received By:</label>
<input type="text" id="receivedBy" placeholder="Received By" class="border p-1 rounded w-full">
</div>
<div>
<label class="block font-semibold text-sm mb-1">Verified By:</label>
<input type="text" id="verifiedBy" placeholder="Verified By" class="border p-1 rounded w-full">
</div>
<div>
<label class="block font-semibold text-sm mb-1">Verification Date:</label>
<input type="date" id="verificationDate" placeholder="Verification Date" class="border p-1 rounded w-full">
</div>
<div class="md:col-span-2">
<label class="block font-semibold text-sm mb-1">Remarks:</label>
<input type="text" id="remarks" placeholder="Remarks" class="border p-1 rounded w-full">
</div>
</div>
<div class="mt-2">
<label class="text-sm font-semibold">Office Reference Copy</label>
<div class="flex gap-3 mt-1">
<div>
<label class="text-sm font-semibold">Form ID:</label>
<p class="text-sm text-gray-600" id="form-id-office"></p>
</div>
<div id="qrcode-office"></div>
</div>
</div>
</div>
<div class="declaration">
<h3 class="font-semibold text-sm">Declaration</h3>
<p class="text-sm mb-1">I declare the above information is correct and I accept the conditions.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-sm">
<div>
<label class="block font-semibold text-sm mb-1">Declaration Date:</label>
<input type="date" id="declarationDate" placeholder="Date" class="border p-1 rounded w-full">
</div>
</div>
</div>
<div class="signatures">
<h3 class="text-lg font-semibold" style="margin-bottom: 20mm;">Signatures</h3>
<div class="flex signature-row-1">
<div>
<div class="signature-box"></div>
<label class="text-sm font-semibold block text-center mt-2">Student Signature</label>
</div>
<div>
<div class="signature-box"></div>
<label class="text-sm font-semibold block text-center mt-2">Guardian Signature</label>
</div>
</div>
<div class="flex signature-row-2">
<div>
<div class="signature-box"></div>
<label class="text-sm font-semibold block text-center mt-2">RM's Signature</label>
</div>
<div>
<div class="seal-box"></div>
<label class="text-sm font-semibold block text-center mt-2">Office Seal</label>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
// Generate random 6-character alphanumeric code
function generateRandomCode() {
return Math.random().toString(36).substr(2, 6).toUpperCase();
}
// Generate form ID based on institution selection
function generateFormId() {
const sniChecked = document.getElementById('sni').checked;
const rniChecked = document.getElementById('rni').checked;
const ncpMcpChecked = document.getElementById('ncp-mcp').checked;
const svuceNceChecked = document.getElementById('svuce-nce').checked;
let institution = '';
const selected = [];
if (sniChecked) selected.push('SNI');
if (rniChecked) selected.push('RNI');
if (ncpMcpChecked) selected.push('NCP/MCP');
if (svuceNceChecked) selected.push('SVUCE/NCE');
institution = selected.join('-') || 'NA';
const randomCode = generateRandomCode();
return `GGI-${institution}-${randomCode}`;
}
// Collect form data for QR code
function collectFormData() {
return {
formId: document.getElementById('form-id-student').textContent,
fullName: document.getElementById('fullName').value || 'N/A',
mobile: document.getElementById('mobile').value || 'N/A',
altContact: document.getElementById('altContact').value || 'N/A',
amount: document.getElementById('amount').value || 'N/A',
txnId: document.getElementById('txnId').value || 'N/A',
receivedBy: document.getElementById('receivedBy').value || 'N/A',
applicationDate: document.getElementById('applicationDate').value || 'N/A',
paymentDate: document.getElementById('paymentDate').value || 'N/A',
};
}
// Set initial Form ID
const formIdStudent = document.getElementById('form-id-student');
const formIdOffice = document.getElementById('form-id-office');
const initialFormId = generateFormId();
formIdStudent.textContent = initialFormId;
formIdOffice.textContent = initialFormId;
// Generate QR codes
const qrCodeStudent = new QRCode(document.getElementById('qrcode-student'), {
text: JSON.stringify(collectFormData()),
width: 120,
height: 120,
correctLevel: QRCode.CorrectLevel.H,
});
const qrCodeOffice = new QRCode(document.getElementById('qrcode-office'), {
text: JSON.stringify(collectFormData()),
width: 120,
height: 120,
correctLevel: QRCode.CorrectLevel.H,
});
// Update QR codes and Form IDs when relevant fields change
const relevantFields = ['sni', 'rni', 'ncp-mcp', 'svuce-nce', 'fullName', 'mobile', 'altContact', 'amount', 'txnId', 'receivedBy', 'applicationDate', 'paymentDate'];
relevantFields.forEach(id => {
const input = document.getElementById(id);
if (input) {
input.addEventListener('change', () => {
if (id === 'sni' || id === 'rni' || id === 'ncp-mcp' || id === 'svuce-nce') {
const newFormId = generateFormId();
formIdStudent.textContent = newFormId;
formIdOffice.textContent = newFormId;
}
const formData = JSON.stringify(collectFormData());
qrCodeStudent.clear();
qrCodeStudent.makeCode(formData);
qrCodeOffice.clear();
qrCodeOffice.makeCode(formData);
});
}
});
// Print functionality
document.getElementById('print-btn').addEventListener('click', () => {
window.print();
});
// Download PDF functionality
document.getElementById('download-btn').addEventListener('click', () => {
const element = document.getElementById('form-section');
const opt = {
margin: [30, 15, 15, 15], // Top, right, bottom, left in mm
filename: `EOI_Form_${formIdStudent.textContent}.pdf`,
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 3, useCORS: true },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
};
setTimeout(() => {
html2pdf().set(opt).from(element).save();
}, 1500);
});
</script>
</body>
</html>
