${item.timestamp}

`; timelineContainer.appendChild(li); }); } else { dashboardPlaceholder.classList.remove('hidden'); dashboardResults.classList.add('hidden'); } } // --- EVENT HANDLERS & LOGIC --- function switchTab(tabName) { state.currentTab = tabName; const tabOrder = ['dashboard', 'config']; const currentIndex = tabOrder.indexOf(tabName); Object.values(tabs).forEach(t => t.classList.remove('active')); Object.values(contents).forEach(c => c.classList.add('hidden')); tabs[tabName].classList.add('active'); contents[tabName].classList.remove('hidden'); navButtons.prev.disabled = currentIndex === 0; navButtons.next.disabled = currentIndex === tabOrder.length - 1; } // File Dropzone Logic dropzone.addEventListener('click', () => fileUpload.click()); dropzone.addEventListener('dragover', (e) => { e.preventDefault(); dropzone.classList.add('dragover'); }); dropzone.addEventListener('dragleave', () => dropzone.classList.remove('dragover')); dropzone.addEventListener('drop', (e) => { e.preventDefault(); dropzone.classList.remove('dragover'); if (e.dataTransfer.files.length) { handleFile(e.dataTransfer.files[0]); } }); fileUpload.addEventListener('change', (e) => { if (e.target.files.length) { handleFile(e.target.files[0]); } }); function handleFile(file) { state.file = file; fileNameDisplay.textContent = file.name; } // Form Submission authForm.addEventListener('submit', async (e) => { e.preventDefault(); if (!state.file) { alert('Please upload a document to authenticate.'); return; } const docName = document.getElementById('doc-name').value; const signatoryName = document.getElementById('signatory-name').value; // Simulate async hash generation const hash = await generateHash(state.file); const now = new Date(); state.authResult = { docName, signatoryName, fileName: state.file.name, hash, timeline: [ { event: 'Document Uploaded', timestamp: now.toLocaleString() }, { event: `Signed by ${signatoryName}`, timestamp: new Date(now.getTime() + 1000).toLocaleString() }, { event: 'Hash Generated & Verified', timestamp: new Date(now.getTime() + 2000).toLocaleString() }, ] }; renderDashboard(); switchTab('dashboard'); }); async function generateHash(file) { const buffer = await file.arrayBuffer(); const hashBuffer = await crypto.subtle.digest('SHA-256', buffer); const hashArray = Array.from(new Uint8Array(hashBuffer)); return hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); } // PDF Download downloadPdfBtn.addEventListener('click', () => { if (!state.authResult) return; const { jsPDF } = window.jspdf; const doc = new jsPDF(); const { docName, signatoryName, fileName, hash, timeline } = state.authResult; doc.setFontSize(20); doc.text("Document Authentication Certificate", 105, 22, { align: 'center' }); doc.setFontSize(12); doc.text(`This certificate confirms the successful authentication of the following document:`, 14, 40); doc.autoTable({ startY: 50, head: [['Field', 'Details']], body: [ ['Document Name', docName], ['Original Filename', fileName], ['Signatory', signatoryName], ['Authentication Date', timeline[0].timestamp.split(',')[0]], ['Document Hash (SHA-256)', hash], ], theme: 'grid', headStyles: { fillColor: [5, 150, 105] }, // emerald-600 columnStyles: { 1: { cellWidth: 'auto' } } }); let finalY = doc.lastAutoTable.finalY; doc.text("Authentication Timeline:", 14, finalY + 15); doc.autoTable({ startY: finalY + 20, head: [['Event', 'Timestamp']], body: timeline.map(item => [item.event, item.timestamp]), theme: 'striped', }); doc.save(`Authentication_Certificate_${fileName}.pdf`); }); // --- NAVIGATION --- navButtons.next.addEventListener('click', () => switchTab('config')); navButtons.prev.addEventListener('click', () => switchTab('dashboard')); // Initial setup switchTab('dashboard'); });