Interactive Secure Checkout Encryption Verifier

Interactive Secure Checkout Encryption Verifier

Visualize how sensitive payment data is protected during an online transaction.

Edit the text that appears on the "Security Concepts" tab.

${configHtml}
`; attachConfigListeners(); }; // --- EVENT HANDLERS & LOGIC --- const attachVerifierListeners = () => { document.getElementById('verify-btn').addEventListener('click', runVerification); document.getElementById('download-pdf-btn').addEventListener('click', generatePdf); }; const attachConfigListeners = () => { document.querySelectorAll('.config-input').forEach(input => { input.addEventListener('change', e => { const key = e.target.dataset.key; appData.concepts[key].text = e.target.value; renderConcepts(); }); }); }; const generatePdf = () => { if(!appData.results) { alert('Please run a verification first to generate a report.'); return; } loadingOverlay.style.display = 'flex'; const { jsPDF } = window.jspdf; document.getElementById('pdf-generated-date').textContent = new Date().toLocaleString(); const pdfHeader = document.getElementById('pdf-header'); pdfHeader.classList.remove('hidden'); const fullContent = document.getElementById('pdf-content-area'); html2canvas(fullContent, { scale: 2, useCORS: true, logging: false, windowWidth: 1200 }) .then(canvas => { pdfHeader.classList.add('hidden'); const imgData = canvas.toDataURL('image/jpeg', 0.9); const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const imgProps = pdf.getImageProperties(imgData); const imgHeight = (imgProps.height * pdfWidth) / imgProps.width; pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, imgHeight); pdf.save('Security-Verification-Report.pdf'); loadingOverlay.style.display = 'none'; }).catch(err => { console.error("PDF generation failed:", err); pdfHeader.classList.add('hidden'); loadingOverlay.style.display = 'none'; alert('An error occurred generating the PDF.'); }); }; // --- TAB NAVIGATION & INITIALIZATION --- const switchTab = (tabIndex) => { activeTabIndex = tabIndex; document.querySelectorAll('.tab-btn').forEach((btn, i) => btn.classList.toggle('active', i === tabIndex)); document.querySelectorAll('.tab-content').forEach((content, i) => content.classList.toggle('hidden', i !== tabIndex)); updateNavButtons(); }; const updateNavButtons = () => { prevTabBtn.disabled = activeTabIndex === 0; nextTabBtn.disabled = activeTabIndex === tabIdentifiers.length - 1; }; const initializeUI = () => { const tabs = [ { name: 'Encryption Verifier', id: 'encryption-verifier' }, { name: 'Security Concepts', id: 'security-concepts' }, { name: 'Data Configuration', id: 'data-configuration' } ]; tabIdentifiers = tabs.map(t => t.id); tabsContainer.innerHTML = tabs.map(tab => ``).join(''); mainContent.innerHTML = tabs.map(tab => `
`).join(''); tabs.forEach((tab, index) => { document.getElementById(`tab-${tab.id}`).addEventListener('click', () => switchTab(index)); }); renderVerifier(); renderConcepts(); renderDataConfig(); switchTab(0); lucide.createIcons(); }; initializeUI(); prevTabBtn.addEventListener('click', () => { if (activeTabIndex > 0) switchTab(activeTabIndex - 1); }); nextTabBtn.addEventListener('click', () => { if (activeTabIndex < tabIdentifiers.length - 1) switchTab(activeTabIndex + 1); }); });
Scroll to Top