Sustainable Fashion
& Textile Guide
Filter by Category
Select a Fabric
Welcome!
Select a fabric from the list to learn more.
This guide provides information about common textiles used in the fashion industry to help you make more informed and sustainable choices.
Environmental Impact
No fabrics in this category.
`; return; } filteredTextiles.forEach(textile => { const card = document.createElement('div'); card.className = 'fabric-card bg-white p-4 rounded-lg shadow-sm border'; card.dataset.name = textile.name; card.innerHTML = `
${textile.name}
`;
fabricListContainer.appendChild(card);
});
};
const updateDetails = (fabricName) => {
selectedFabric = TEXTILES.find(t => t.name === fabricName);
if (!selectedFabric) return;
detailsCard.style.opacity = '0';
setTimeout(() => {
fabricTitleEl.textContent = selectedFabric.name;
fabricCategoryEl.textContent = selectedFabric.category;
fabricSustainabilityEl.innerHTML = `
Sustainability Rating:
${getSustainabilityHTML(textile.sustainability, true)}
${getSustainabilityHTML(selectedFabric.sustainability)}
`;
fabricDescriptionEl.textContent = selectedFabric.description;
fabricImpactEl.textContent = selectedFabric.impact;
downloadPdfBtn.disabled = false;
detailsCard.style.opacity = '1';
}, 250);
};
const getSustainabilityHTML = (rating, isSmall = false) => {
let html = '';
const sizeClass = isSmall ? 'w-4 h-4' : 'w-6 h-6';
for (let i = 0; i < 5; i++) {
const colorClass = i < rating ? 'text-green-500' : 'text-gray-300';
html += ``;
}
return html;
};
// --- EVENT LISTENERS ---
const addEventListeners = () => {
categoryFilterContainer.addEventListener('click', (e) => {
if (e.target.tagName === 'BUTTON') {
currentCategory = e.target.dataset.category;
document.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active'));
e.target.classList.add('active');
renderFabricList();
}
});
fabricListContainer.addEventListener('click', (e) => {
const card = e.target.closest('.fabric-card');
if (card) {
updateDetails(card.dataset.name);
}
});
downloadPdfBtn.addEventListener('click', handlePdfDownload);
};
// --- PDF DOWNLOAD ---
const handlePdfDownload = () => {
if (!selectedFabric) return;
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'mm', 'a4');
const primaryColor = '#16a34a';
doc.setFillColor(primaryColor).rect(0, 0, 210, 30, 'F');
doc.setFont('helvetica', 'bold').setFontSize(20).setTextColor('#ffffff');
doc.text('Sustainable Textile Report', 105, 18, { align: 'center' });
doc.setFontSize(22).setFont('helvetica', 'bold').setTextColor('#1f2937').text(selectedFabric.name, 14, 45);
doc.setFontSize(14).setFont('helvetica', 'normal').setTextColor(primaryColor).text(`Category: ${selectedFabric.category}`, 14, 52);
doc.setFontSize(14).setFont('helvetica', 'bold').setTextColor('#1f2937').text(`Sustainability Rating: ${selectedFabric.sustainability} / 5`, 14, 62);
doc.setLineWidth(0.5).setDrawColor(primaryColor).line(14, 70, 196, 70);
doc.setFontSize(12).setFont('helvetica', 'bold').text('Description', 14, 80);
const descLines = doc.splitTextToSize(selectedFabric.description, 180);
doc.setFont('helvetica', 'normal').text(descLines, 14, 86);
const impactY = 86 + (descLines.length * 6) + 10;
doc.setFontSize(12).setFont('helvetica', 'bold').text('Environmental Impact', 14, impactY);
const impactLines = doc.splitTextToSize(selectedFabric.impact, 180);
doc.setFont('helvetica', 'normal').text(impactLines, 14, impactY + 6);
doc.save(`${selectedFabric.name}_Report.pdf`);
};
// --- KICK IT OFF ---
init();
});