<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;700&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<style>
.knew-box {
max-width: 650px;
margin: 20px auto;
padding: 30px;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
font-family: 'Open Sans', sans-serif;
border-top: 6px solid #0C2D48;
}
.knew-box h3 {
font-family: 'Poppins', sans-serif;
color: #0C2D48;
text-align: center;
margin: 0 0 20px 0;
}
.field-box { margin-bottom: 15px; }
.field-box label {
display: block;
font-weight: 700;
color: #0C2D48;
margin-bottom: 5px;
font-size: 14px;
}
.k-input {
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
box-sizing: border-box;
}
.member-row {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.add-btn {
background: #eef2f6;
color: #0C2D48;
border: 1px dashed #0C2D48;
padding: 8px 14px;
border-radius: 6px;
cursor: pointer;
font-weight: 700;
font-size: 13px;
}
.del-btn {
background: #D82618;
color: #fff;
border: none;
padding: 0 14px;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
}
.submit-btn {
width: 100%;
background: #0C2D48;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
padding: 14px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.submit-btn:hover { background: #D82618; }
</style>
<div class="knew-box">
<h3>KNEW 2026 Feedback & Certificate</h3>
<form id="knewForm">
<div class="field-box">
<label>Team Name (Type 'Individual' if solo)</label>
<input type="text" id="teamName" class="k-input" placeholder="Enter Team Name" required>
</div>
<div class="field-box">
<label>Event Participated</label>
<select id="eventName" class="k-input" required>
<option value="">-- Select Event --</option>
<option value="Paper Presentation">Paper Presentation</option>
<option value="Robo-Race">Robo-Race</option>
<option value="Robo-Sumo">Robo-Sumo</option>
<option value="Robo-Soccer">Robo-Soccer</option>
<option value="Line Follower">Line Follower</option>
<option value="Air Quality Workshop">Air Quality Workshop</option>
</select>
</div>
<div class="field-box">
<label>College Name (Short Name, e.g., CIT, Gubbi)</label>
<input type="text" id="institute" class="k-input" placeholder="e.g., CIT, Gubbi" required>
</div>
<div class="field-box">
<label>Participants (Name & USN)</label>
<div id="memberList">
<div class="member-row">
<input type="text" class="k-input p-name" placeholder="Student Full Name" required>
<input type="text" class="k-input p-usn" placeholder="USN (e.g. 1CG24CS001)" required style="text-transform:uppercase;">
</div>
</div>
<button type="button" class="add-btn" onclick="addMoreMember()">+ Add Team Member</button>
</div>
<div class="field-box">
<label>Rate the Event</label>
<select id="rating" class="k-input" required>
<option value="5 - Excellent">⭐⭐⭐⭐⭐ (5 - Excellent)</option>
<option value="4 - Very Good">⭐⭐⭐⭐ (4 - Very Good)</option>
<option value="3 - Good">⭐⭐⭐ (3 - Good)</option>
</select>
</div>
<div class="field-box">
<label>Feedback</label>
<textarea id="feedback" class="k-input" rows="3" placeholder="Your feedback about KNEW 2026..." required></textarea>
</div>
<button type="submit" id="subBtn" class="submit-btn">Submit Feedback & Download Certificate</button>
<p id="msg" style="text-align:center; margin-top:12px; font-weight:bold;"></p>
</form>
</div>
<canvas id="hiddenCanvas" width="3000" height="2121" style="display:none;"></canvas>
<script>
// =========================================================
// STEP 4: PASTE YOUR 2 LINKS HERE INSIDE THE QUOTES
// =========================================================
const IMAGE_LINK_1 = "https://events.cittumkur.org/wp-content/uploads/2026/11/Copy-of-Copy-of-Modern-Academic-Certificate-Design-scaled.png";
const SHEET_LINK_2 = "https://script.google.com/a/macros/cittumkur.org/s/AKfycbw5NslrtTBeMAmPshkN3mZSjlnP2xWnO6ymxmRds9Y2BNyiY7JcZOdpS5li1k8szWgQbQ/exec";
function addMoreMember() {
const list = document.getElementById('memberList');
if (list.children.length >= 5) return alert("Maximum 5 members allowed.");
const div = document.createElement('div');
div.className = 'member-row';
div.innerHTML = `
<input type="text" class="k-input p-name" placeholder="Student Full Name" required>
<input type="text" class="k-input p-usn" placeholder="USN" required style="text-transform:uppercase;">
<button type="button" class="del-btn" onclick="this.parentElement.remove()">✕</button>
`;
list.appendChild(div);
}
function fitText(ctx, text, maxW, startSize, font) {
let s = startSize;
do {
ctx.font = `700 ${s}px "${font}", sans-serif`;
if (ctx.measureText(text).width <= maxW) break;
s -= 2;
} while (s > 18);
}
document.getElementById('knewForm').addEventListener('submit', async function(e) {
e.preventDefault();
const btn = document.getElementById('subBtn');
const msg = document.getElementById('msg');
btn.disabled = true;
btn.innerText = "Generating Certificate...";
msg.style.color = "#0C2D48";
msg.innerText = "Please wait, downloading your PDF...";
const teamName = document.getElementById('teamName').value.trim();
const eventName = document.getElementById('eventName').value;
const institute = document.getElementById('institute').value.trim().replace(/\s+Institute$/i, '');
const rating = document.getElementById('rating').value;
const feedback = document.getElementById('feedback').value.trim();
const names = document.querySelectorAll('.p-name');
const usns = document.querySelectorAll('.p-usn');
const participants = [];
for (let i = 0; i < names.length; i++) {
participants.push({
name: names[i].value.trim().toUpperCase().replace(/^(MR\.?\s*|MS\.?\s*)/i, ''),
usn: usns[i].value.trim().toUpperCase()
});
}
// 1. Save to Google Sheet
fetch(SHEET_LINK_2, {
method: 'POST',
mode: 'no-cors',
body: JSON.stringify({ teamName, eventName, institute, participants, rating, feedback })
}).catch(err => console.log(err));
// 2. Draw Certificate & Download PDF
try {
await document.fonts.ready;
const img = await new Promise((res, rej) => {
const i = new Image();
i.crossOrigin = "anonymous";
i.onload = () => res(i);
i.onerror = rej;
i.src = IMAGE_LINK_1;
});
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: [3000, 2121] });
const canvas = document.getElementById('hiddenCanvas');
const ctx = canvas.getContext('2d');
for (let i = 0; i < participants.length; i++) {
if (i > 0) pdf.addPage([3000, 2121], 'landscape');
ctx.clearRect(0, 0, 3000, 2121);
ctx.drawImage(img, 0, 0, 3000, 2121);
ctx.textAlign = 'center';
ctx.fillStyle = '#0C2D48';
// Print Name
fitText(ctx, participants[i].name, 780, 42, 'Poppins');
ctx.fillText(participants[i].name, 2055, 1174);
// Print USN
fitText(ctx, participants[i].usn, 370, 38, 'Open Sans');
ctx.fillText(participants[i].usn, 1127, 1255);
// Print College
fitText(ctx, institute, 650, 38, 'Open Sans');
ctx.fillText(institute, 1832, 1255);
// Print Event
fitText(ctx, eventName, 960, 40, 'Poppins');
ctx.fillStyle = '#D82618';
ctx.fillText(eventName, 1115, 1416);
pdf.addImage(canvas.toDataURL('image/jpeg', 0.95), 'JPEG', 0, 0, 3000, 2121);
}
pdf.save(`KNEW2026_${teamName}_Certificate.pdf`);
msg.style.color = "green";
msg.innerText = "✔ Certificate Downloaded Successfully!";
document.getElementById('knewForm').reset();
} catch (error) {
msg.style.color = "red";
msg.innerText = "Error: Check if Link 1 (Certificate Image URL) is pasted properly.";
} finally {
btn.disabled = false;
btn.innerText = "Submit Feedback & Download Certificate";
}
});
</script>