|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ToxiTrack - Toxin Index</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
} |
|
|
.toxin-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.toxin-card:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.category-badge { |
|
|
position: absolute; |
|
|
top: -12px; |
|
|
right: 20px; |
|
|
padding: 4px 12px; |
|
|
border-radius: 9999px; |
|
|
font-weight: 600; |
|
|
text-transform: uppercase; |
|
|
font-size: 0.75rem; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
|
|
|
<div class="text-center mb-16"> |
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-4">ToxiTrack Toxin Index</h1> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto"> |
|
|
Comprehensive reference guide to common toxins in food, water, air, and household products |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex justify-center mb-12"> |
|
|
<div class="inline-flex rounded-lg border border-gray-200 bg-white"> |
|
|
<button id="allTab" class="px-6 py-3 rounded-l-lg font-medium active-tab">All Toxins</button> |
|
|
<button id="foodTab" class="px-6 py-3 font-medium text-gray-600 hover:text-gray-800 border-l border-gray-200">Food & Beverages</button> |
|
|
<button id="waterTab" class="px-6 py-3 font-medium text-gray-600 hover:text-gray-800 border-l border-gray-200">Water</button> |
|
|
<button id="airTab" class="px-6 py-3 font-medium text-gray-600 hover:text-gray-800 border-l border-gray-200">Air</button> |
|
|
<button id="householdTab" class="px-6 py-3 font-medium text-gray-600 hover:text-gray-800 border-l border-gray-200">Household</button> |
|
|
<button id="otherTab" class="px-6 py-3 rounded-r-lg font-medium text-gray-600 hover:text-gray-800 border-l border-gray-200">Other Sources</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="toxinContainer"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-16 p-8 bg-white rounded-xl shadow-sm"> |
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6">Key Sources of Toxin Exposure</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-700 mb-4">Top Food Sources</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-5 w-5 text-emerald-500 mr-3 mt-1"> |
|
|
<i data-feather="alert-triangle"></i> |
|
|
</div> |
|
|
<p class="text-gray-600"><span class="font-medium">Tuna/Swordfish:</span> High mercury content</p> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-5 w-5 text-emerald-500 mr-3 mt-1"> |
|
|
<i data-feather="alert-triangle"></i> |
|
|
</div> |
|
|
<p class="text-gray-600"><span class="font-medium">Rice:</span> Often contains arsenic and cadmium</p> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-5 w-5 text-emerald-500 mr-3 mt-1"> |
|
|
<i data-feather="alert-triangle"></i> |
|
|
</div> |
|
|
<p class="text-gray-600"><span class="font-medium">Processed Meats:</span> Nitrites/nitrates and PAHs</p> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-5 w-5 text-emerald-500 mr-3 mt-1"> |
|
|
<i data-feather="alert-triangle"></i> |
|
|
</div> |
|
|
<p class="text-gray-600"><span class="font-medium">Non-organic Produce:</span> Pesticide residues</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-700 mb-4">Top Environmental Sources</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-5 w-5 text-red-500 mr-3 mt-1"> |
|
|
<i data-feather="alert-circle"></i> |
|
|
</div> |
|
|
<p class="text-gray-600"><span class="font-medium">Air Pollution:</span> PM2.5, ozone, NOx from traffic</p> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-5 w-5 text-red-500 mr-3 mt-1"> |
|
|
<i data-feather="alert-circle"></i> |
|
|
</div> |
|
|
<p class="text-gray-600"><span class="font-medium">Tap Water:</span> Lead, chlorine byproducts, PFAS</p> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-5 w-5 text-red-500 mr-3 mt-1"> |
|
|
<i data-feather="alert-circle"></i> |
|
|
</div> |
|
|
<p class="text-gray-600"><span class="font-medium">Household Products:</span> Cleaning supplies, plastics</p> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-5 w-5 text-red-500 mr-3 mt-1"> |
|
|
<i data-feather="alert-circle"></i> |
|
|
</div> |
|
|
<p class="text-gray-600"><span class="font-medium">Personal Care Items:</span> Cosmetics with heavy metals</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12 bg-emerald-50 rounded-xl p-8"> |
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4">Reducing Your Toxin Exposure</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="bg-white p-6 rounded-lg"> |
|
|
<div class="text-emerald-500 mb-4"> |
|
|
<i data-feather="shopping-bag" class="w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-gray-800 mb-2">Smart Shopping</h3> |
|
|
<p class="text-gray-600 text-sm">Choose organic when possible, especially for the Dirty Dozen. Avoid processed foods and plastic packaging.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg"> |
|
|
<div class="text-emerald-500 mb-4"> |
|
|
<i data-feather="home" class="w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-gray-800 mb-2">Home Improvements</h3> |
|
|
<p class="text-gray-600 text-sm">Use HEPA air filters, water filters, and replace nonstick cookware with ceramic or stainless steel.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg"> |
|
|
<div class="text-emerald-500 mb-4"> |
|
|
<i data-feather="activity" class="w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-gray-800 mb-2">Regular Monitoring</h3> |
|
|
<p class="text-gray-600 text-sm">Track your toxin exposure with ToxiTrack and get personalized recommendations for reduction.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const toxins = [ |
|
|
|
|
|
{ |
|
|
name: "Mercury", |
|
|
category: "food", |
|
|
sources: "Tuna, swordfish, king mackerel, shark, marlin", |
|
|
effects: "Neurotoxin, brain/kidney damage", |
|
|
severity: "high" |
|
|
}, |
|
|
{ |
|
|
name: "Cadmium", |
|
|
category: "food", |
|
|
sources: "Cacao, rice, shellfish, leafy greens from polluted soils", |
|
|
effects: "Kidney damage, bone loss, carcinogen", |
|
|
severity: "medium" |
|
|
}, |
|
|
{ |
|
|
name: "Arsenic (inorganic)", |
|
|
category: "food", |
|
|
sources: "Rice, groundwater, some seafood", |
|
|
effects: "Carcinogen, skin lesions, vascular issues", |
|
|
severity: "high" |
|
|
}, |
|
|
{ |
|
|
name: "Lead", |
|
|
category: "food", |
|
|
sources: "Root vegetables in contaminated soil, spices, old pipes, imported candies", |
|
|
effects: "Neurotoxin, developmental delays", |
|
|
severity: "high" |
|
|
}, |
|
|
{ |
|
|
name: "Glyphosate", |
|
|
category: "food", |
|
|
sources: "Non-organic wheat, oats, soy, corn", |
|
|
effects: "Endocrine disruptor, possible carcinogen", |
|
|
severity: "medium" |
|
|
}, |
|
|
|
|
|
{ |
|
|
name: "PFAS (forever chemicals)", |
|
|
category: "water", |
|
|
sources: "Contaminated water", |
|
|
effects: "Bioaccumulative, endocrine disruption", |
|
|
severity: "high" |
|
|
}, |
|
|
{ |
|
|
name: "Chlorine byproducts", |
|
|
category: "water", |
|
|
sources: "Chlorinated tap water", |
|
|
effects: "Carcinogenic, liver/kidney toxicity", |
|
|
severity: "medium" |
|
|
}, |
|
|
|
|
|
{ |
|
|
name: "PM2.5 & PM10", |
|
|
category: "air", |
|
|
sources: "Combustion, dust", |
|
|
effects: "Cardiovascular, strokes", |
|
|
severity: "high" |
|
|
}, |
|
|
{ |
|
|
name: "VOCs", |
|
|
category: "air", |
|
|
sources: "Fuels, paints", |
|
|
effects: "Carcinogens, neurotoxins", |
|
|
severity: "medium" |
|
|
}, |
|
|
|
|
|
{ |
|
|
name: "Bisphenols (BPA, BPS)", |
|
|
category: "household", |
|
|
sources: "Plastic containers, receipts", |
|
|
effects: "Endocrine disruption", |
|
|
severity: "medium" |
|
|
}, |
|
|
{ |
|
|
name: "Phthalates", |
|
|
category: "household", |
|
|
sources: "Vinyl flooring, plastic products", |
|
|
effects: "Hormone disruption", |
|
|
severity: "medium" |
|
|
}, |
|
|
|
|
|
{ |
|
|
name: "Endocrine disruptors", |
|
|
category: "other", |
|
|
sources: "Multiple sources", |
|
|
effects: "Fertility issues, metabolic disorders", |
|
|
severity: "high" |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
function renderToxins(filter = 'all') { |
|
|
const container = document.getElementById('toxinContainer'); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
const filteredToxins = filter === 'all' ? toxins : toxins.filter(t => t.category === filter); |
|
|
|
|
|
filteredToxins.forEach(toxin => { |
|
|
const card = document.createElement('div'); |
|
|
card.className = `bg-white rounded-xl p-6 shadow-sm toxin-card relative`; |
|
|
|
|
|
|
|
|
let categoryColor = 'bg-gray-200 text-gray-800'; |
|
|
let categoryName = 'Other'; |
|
|
|
|
|
if (toxin.category === 'food') { |
|
|
categoryColor = 'bg-emerald-100 text-emerald-800'; |
|
|
categoryName = 'Food'; |
|
|
} else if (toxin.category === 'water') { |
|
|
categoryColor = 'bg-blue-100 text-blue-800'; |
|
|
categoryName = 'Water'; |
|
|
} else if (toxin.category === 'air') { |
|
|
categoryColor = 'bg-purple-100 text-purple-800'; |
|
|
categoryName = 'Air'; |
|
|
} else if (toxin.category === 'household') { |
|
|
categoryColor = 'bg-yellow-100 text-yellow-800'; |
|
|
categoryName = 'Household'; |
|
|
} |
|
|
|
|
|
|
|
|
let severityColor = 'bg-red-500'; |
|
|
if (toxin.severity === 'medium') severityColor = 'bg-yellow-500'; |
|
|
if (toxin.severity === 'low') severityColor = 'bg-green-500'; |
|
|
|
|
|
card.innerHTML = ` |
|
|
<div class="category-badge ${categoryColor}">${categoryName}</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">${toxin.name}</h3> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-sm font-medium text-gray-600 mr-2">Severity:</div> |
|
|
<div class="flex space-x-1"> |
|
|
<div class="w-3 h-3 rounded-full ${severityColor}"></div> |
|
|
<div class="text-xs font-medium text-gray-500">${toxin.severity}</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<p class="text-sm font-medium text-gray-600">Common Sources:</p> |
|
|
<p class="text-gray-700">${toxin.sources}</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-600">Health Effects:</p> |
|
|
<p class="text-gray-700">${toxin.effects}</p> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
container.appendChild(card); |
|
|
}); |
|
|
|
|
|
feather.replace(); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('allTab').addEventListener('click', () => { |
|
|
document.querySelectorAll('[id$="Tab"]').forEach(tab => { |
|
|
tab.classList.remove('active-tab', 'text-emerald-600'); |
|
|
tab.classList.add('text-gray-600'); |
|
|
}); |
|
|
document.getElementById('allTab').classList.add('active-tab', 'text-emerald-600'); |
|
|
renderToxins('all'); |
|
|
}); |
|
|
|
|
|
document.getElementById('foodTab').addEventListener('click', () => { |
|
|
document.querySelectorAll('[id$="Tab"]').forEach(tab => { |
|
|
tab.classList.remove('active-tab', 'text-emerald-600'); |
|
|
tab.classList.add('text-gray-600'); |
|
|
}); |
|
|
document.getElementById('foodTab').classList.add('active-tab', 'text-emerald-600'); |
|
|
renderToxins('food'); |
|
|
}); |
|
|
|
|
|
document.getElementById('waterTab').addEventListener('click', () => { |
|
|
document.querySelectorAll('[id$="Tab"]').forEach(tab => { |
|
|
tab.classList.remove('active-tab', 'text-emerald-600'); |
|
|
tab.classList.add('text-gray-600'); |
|
|
}); |
|
|
document.getElementById('waterTab').classList.add('active-tab', 'text-emerald-600'); |
|
|
renderToxins('water'); |
|
|
}); |
|
|
|
|
|
document.getElementById('airTab').addEventListener('click', () => { |
|
|
document.querySelectorAll('[id$="Tab"]').forEach(tab => { |
|
|
tab.classList.remove('active-tab', 'text-emerald-600'); |
|
|
tab.classList.add('text-gray-600'); |
|
|
}); |
|
|
document.getElementById('airTab').classList.add('active-tab', 'text-emerald-600'); |
|
|
renderToxins('air'); |
|
|
}); |
|
|
|
|
|
document.getElementById('householdTab').addEventListener('click', () => { |
|
|
document.querySelectorAll('[id$="Tab"]').forEach(tab => { |
|
|
tab.classList.remove('active-tab', 'text-emerald-600'); |
|
|
tab.classList.add('text-gray-600'); |
|
|
}); |
|
|
document.getElementById('householdTab').classList.add('active-tab', 'text-emerald-600'); |
|
|
renderToxins('household'); |
|
|
}); |
|
|
|
|
|
document.getElementById('otherTab').addEventListener('click', () => { |
|
|
document.querySelectorAll('[id$="Tab"]').forEach(tab => { |
|
|
tab.classList.remove('active-tab', 'text-emerald-600'); |
|
|
tab.classList.add('text-gray-600'); |
|
|
}); |
|
|
document.getElementById('otherTab').classList.add('active-tab', 'text-emerald-600'); |
|
|
renderToxins('other'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('allTab').classList.add('text-emerald-600'); |
|
|
renderToxins(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
