${item.name}

`; gestureGrid.appendChild(card); }); }; // --- PDF DOWNLOAD --- downloadPdfBtn.addEventListener('click', () => { const { jsPDF } = window.jspdf; const doc = new jsPDF(); // --- PDF STYLING AND CONTENT --- const pageWidth = doc.internal.pageSize.getWidth(); const margin = 15; // 1. Header & Title doc.setFontSize(24); doc.setFont('helvetica', 'bold'); doc.setTextColor(40, 52, 71); doc.text('Sign Language Study Sheet', pageWidth / 2, margin + 10, { align: 'center' }); doc.setFontSize(11); doc.setTextColor(100, 116, 139); doc.text(`Generated on: ${new Date().toLocaleDateString()}`, pageWidth / 2, margin + 18, { align: 'center' }); // 2. Alphabet Section doc.setFontSize(18); doc.setFont('helvetica', 'bold'); doc.setTextColor(30, 41, 59); doc.text('ASL Alphabet', margin, margin + 40); const alphabetTableData = alphabetData.map(item => [item.letter, 'Fingerspelling Sign']); doc.autoTable({ startY: margin + 45, head: [['Letter', 'Description']], body: alphabetTableData, theme: 'grid', headStyles: { fillColor: [37, 99, 235] } // blue-600 }); let finalY = doc.lastAutoTable.finalY + 20; // 3. Gestures Section doc.setFontSize(18); doc.text('Common Gestures', margin, finalY); const gestureTableData = gestureData.map(item => [item.name, 'Action-based sign']); doc.autoTable({ startY: finalY + 5, head: [['Phrase', 'Description']], body: gestureTableData, theme: 'grid', headStyles: { fillColor: [22, 163, 74] } // green-600 }); // 4. Footer const pageHeight = doc.internal.pageSize.getHeight(); doc.setFontSize(9); doc.setTextColor(150); doc.text('Page 1 of 1', pageWidth - margin, pageHeight - 10, { align: 'right' }); doc.text('Powered by the Online Sign Language Learning Tool', margin, pageHeight - 10); doc.save('sign-language-study-sheet.pdf'); }); // --- INITIALIZATION --- renderAlphabet(); renderGestures(); });