Your Keywords
${analysis.yourKeywordCount.toLocaleString()}
Total Competitor Keywords
${analysis.totalCompetitorKeywords.toLocaleString()}
`;
reportTableBody.innerHTML = '';
if (analysis.gap.length === 0) {
reportTableBody.innerHTML = `
| No keyword gaps found! |
`;
return;
}
analysis.gap.forEach(item => {
const tr = document.createElement('tr');
tr.className = 'bg-white border-b hover:bg-gray-50';
const competitorsHtml = item.competitors.map(c => `
${c}`).join(' ');
const difficultyColor = item.difficulty > 70 ? 'bg-red-500' : item.difficulty > 40 ? 'bg-yellow-400' : 'bg-green-500';
tr.innerHTML = `
${item.keyword} |
${competitorsHtml} |
${item.volume.toLocaleString()} |
|
`;
reportTableBody.appendChild(tr);
});
};
// --- Tab & Navigation Logic ---
function switchTab(targetTabId, runAnalysis = false) {
if (runAnalysis) {
// Show loader and switch tab immediately
currentTab = targetTabId;
tabs.forEach(tab => tab.classList.toggle('active', tab.dataset.tab === currentTab));
tabContents.forEach(content => content.classList.toggle('active', content.id === currentTab));
updateNavButtons();
loader.style.display = 'flex';
pdfContent.style.display = 'none';
// Simulate API delay
setTimeout(() => {
const analysisResult = analyzeKeywords();
renderReport(analysisResult);
loader.style.display = 'none';
pdfContent.style.display = 'block';
}, 1500);
} else {
currentTab = targetTabId;
tabs.forEach(tab => tab.classList.toggle('active', tab.dataset.tab === currentTab));
tabContents.forEach(content => content.classList.toggle('active', content.id === currentTab));
updateNavButtons();
}
}
function updateNavButtons() {
if (currentTab === 'input') {
prevBtn.style.display = 'none';
nextBtn.style.display = 'inline-flex';
pdfButtonContainer.style.display = 'none';
} else {
prevBtn.style.display = 'inline-flex';
nextBtn.style.display = 'none';
pdfButtonContainer.style.display = 'block';
}
}
// --- Event Handlers ---
tabs.forEach(tab => tab.addEventListener('click', () => switchTab(tab.dataset.tab)));
nextBtn.addEventListener('click', () => switchTab('report', true));
prevBtn.addEventListener('click', () => switchTab('input'));
// --- PDF Download ---
downloadPdfBtn.addEventListener('click', async () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF({ orientation: 'l', unit: 'mm', format: 'a4' });
const content = document.getElementById('pdf-content');
document.getElementById('pdf-date').textContent = `Report Generated: ${new Date().toLocaleString()}`;
const canvas = await html2canvas(content, { scale: 2 });
const imgData = canvas.toDataURL('image/jpeg', 1.0);
const imgProps = doc.getImageProperties(imgData);
const pdfWidth = doc.internal.pageSize.getWidth() - 20;
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
doc.addImage(imgData, 'JPEG', 10, 10, pdfWidth, pdfHeight);
document.getElementById('pdf-date').textContent = '';
doc.save(`Keyword-Gap-Report-${new Date().toISOString().slice(0,10)}.pdf`);
});
// --- Initial Load ---
updateNavButtons();
});
