Errors / Issues
${errorCount}
`;
// Main Table
const dashboardTableBody = document.getElementById('dashboard-table-body');
dashboardTableBody.innerHTML = urls.map(url => {
const res = url.result;
let statusClass, redirectClass;
if (res.status === 'Secure') statusClass = 'bg-green-100 text-green-800';
else if (res.status === 'Insecure') statusClass = 'bg-red-100 text-red-800';
else if (res.status === 'Mixed Content Risk') statusClass = 'bg-yellow-100 text-yellow-800';
else statusClass = 'bg-gray-100 text-gray-800';
if (res.redirects) redirectClass = 'text-green-600 font-semibold';
else redirectClass = 'text-red-600 font-semibold';
return `
| ${url.domain} |
${res.http} |
${res.https} |
${res.redirects ? 'Yes' : 'No'} |
${res.status} |
`;
}).join('');
// Chart
if (statusChart) statusChart.destroy();
statusChart = new Chart(document.getElementById('status-chart').getContext('2d'), {
type: 'pie',
data: {
labels: ['Secure', 'Insecure', 'Errors / Issues'],
datasets: [{
data: [secureCount, insecureCount, errorCount],
backgroundColor: ['#34d399', '#f87171', '#fbbf24']
}]
},
options: { responsive: true, plugins: { legend: { position: 'top' } } }
});
};
// --- EVENT HANDLERS ---
const handleAddUrl = () => {
const input = document.getElementById('new-url-input');
const domain = input.value.trim().toLowerCase().replace(/^(https?:\/\/)?(www\.)?/, '').replace(/\/.*$/, '');
if (domain && !urls.some(u => u.domain === domain)) {
const newId = urls.length > 0 ? Math.max(...urls.map(u => u.id)) + 1 : 1;
urls.push({ id: newId, domain, result: null });
renderConfigTable();
input.value = '';
} else if (!domain) {
alert('Please enter a domain.');
} else {
alert('This domain is already in the list.');
}
};
const handleDeleteUrl = (e) => {
const btn = e.target.closest('.delete-btn');
if (btn) {
const id = parseInt(btn.closest('tr').dataset.id);
urls = urls.filter(u => u.id !== id);
renderConfigTable();
}
};
const generatePDF = () => {
const pdfContent = document.getElementById('pdf-content');
html2canvas(pdfContent, { scale: 2, useCORS: true }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'l', unit: 'mm', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const imgWidth = pdfWidth - 20;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.setFontSize(22).setFont('helvetica', 'bold').text('HTTP vs HTTPS Status Report', pdfWidth / 2, 15, { align: 'center' });
pdf.addImage(imgData, 'PNG', 10, 25, imgWidth, imgHeight);
pdf.save('http-https-status-report.pdf');
});
};
// --- ATTACH LISTENERS ---
prevBtn.addEventListener('click', () => showTab('dashboard'));
nextBtn.addEventListener('click', () => showTab('config'));
tabButtons.dashboard.addEventListener('click', () => showTab('dashboard'));
tabButtons.config.addEventListener('click', () => showTab('config'));
document.getElementById('add-url-btn').addEventListener('click', handleAddUrl);
document.getElementById('config-table-body').addEventListener('click', handleDeleteUrl);
document.getElementById('download-pdf-btn').addEventListener('click', generatePDF);
// --- INITIAL SETUP ---
showTab('dashboard');
});
