MyLEGACY · Our Impact
:root {
--brand-navy: #333268;
--brand-orange: #f16940;
}
html, body { background: white; }
.slide-track { transition: transform 500ms ease-in-out; }
.stat-card { transition: transform .2s, box-shadow .2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
@keyframes pulseRing {
0% { r: 2.2; opacity: .55; }
100% { r: 4.5; opacity: 0; }
}
.pulse-ring { animation: pulseRing 2.4s ease-out infinite; transform-origin: center; }
const BRAND_NAVY = '#333268';
const BRAND_ORANGE = '#f16940';
// ── SITE COPY ──────────────────────────────────────────────
const siteCopy = {
eyebrow: 'Our Impact So Far',
headline: 'Every number tells a story of lives transformed.',
intro: "We take pride in the positive change we are effectuating in the world. With the dedicated efforts of our team, volunteers, and donors, we are achieving.",
overall: {
badge: 'Overall Impact',
title: 'Combined organizational impact',
description: 'Across all programs and communities we serve.'
}
};
// ── OVERALL STATS ─────────────────────────────────89─────────
const generalStats = [
{ label: 'WASH Beneficiaries', value: 50000, plus: true, icon: 'heart' },
{ label: 'Households reached', value: 48000, plus: true, icon: 'home' },
{ label: 'Students reached', value: 5899, plus: false, icon: 'school' },
{ label: 'Stakeholders engaged', value: 1000, plus: true, icon: 'handshake' },
{ label: 'sWASH Club Members', value: 1080, plus: true, icon: 'users' },
{ label: 'WASH Graduates Certified', value: 470, plus: true, icon: 'award' },
{ label: 'In-school girls trained on MHM',value: 200, plus: true, icon: 'sparkles' },
{ label: 'Women & youth trained', value: 124, plus: false, icon: 'users' },
{ label: 'Water tanks installed', value: 30, plus: true, icon: 'droplet' },
{ label: 'Trained teachers on MHM', value: 28, plus: true, icon: 'graduation' },
{ label: 'Land Rights Champions', value: 20, plus: true, icon: 'shield' },
{ label: 'Wards served in Dar es Salaam', value: 7, plus: false, icon: 'pin' },
];
// ── PROGRAMS ───────────────────────────────────────────────
const programs = [
{
id: 'kesho-njema',
name: 'Kesho Njema',
tagline: 'Funded By Ireland Embassy in Tanzania',
description: 'Improving sanitation, menstrual health, and WASH outcomes for schools and communities.',
accent: 'navy',
stats: [
{ label: 'Water tanks installed', value: 30, plus: true, icon: 'droplet' },
{ label: 'Trained teachers on MHM', value: 28, plus: true, icon: 'graduation' },
{ label: 'In-school girls trained on MHM', value: 200, plus: true, icon: 'sparkles' },
{ label: 'WASH Graduates Certified', value: 170, plus: true, icon: 'award' },
{ label: 'sWASH Club Members', value: 1080, plus: true, icon: 'users' },
{ label: 'Students reached', value: 1899, plus: false, icon: 'school' },
],
map: {
title: 'Beneficiary Areas · Dar es Salaam',
subtitle: 'Wards where Kesho Njema is transforming WASH outcomes.',
wards: [
{ name: 'Wazo', x: 62, y: 18, note: 'Beneficiary area' },
{ name: 'Kunduchi', x: 74, y: 30, note: 'Beneficiary area' },
{ name: 'Kawe', x: 66, y: 44, note: 'Beneficiary area' },
]
}
},
{
id: 'green-frames',
name: 'Green Frames',
tagline: 'Supported by CDEA & GotheInstitut Tanzania under Vijana@rtWork Programme and Funded by European Eunion (EU).',
description: 'Storytelling and film production advocating for climate justice and gender equity.',
accent: 'orange',
stats: [
{ label: 'Communities Engaged', value: 4, icon: 'shield' },
{ label: 'Women trained', value: 15, plus: false, icon: 'users' },
{ label: 'Stakeholders engaged', value: 200, plus: true, icon: 'handshake' },
],
map: {
title: 'Production Team Locations · Dar es Salaam',
subtitle: 'Wards where Green Frames crews are based and filming.',
wards: [
{ name: 'Kunduchi', x: 74, y: 30, note: 'Production team' },
{ name: 'Kawe', x: 66, y: 44, note: 'Production team' },
{ name: 'Majohe', x: 48, y: 68, note: 'Production team' },
{ name: 'Kipunguni', x: 40, y: 76, note: 'Production team' },
]
}
}
];
/* ═══════════════════════════════════════════════════════════
No need to edit below this line.
═══════════════════════════════════════════════════════════ */
// ── SVG icons (inline, no external deps) ───────────────────
const ICONS = {
heart: '',
home: '',
school: '',
handshake: '',
users: '',
award: '',
sparkles: '',
droplet: '',
graduation: '',
shield: '',
pin: ''
};
const svgIcon = (name) => `
${ICONS[name] || ICONS.sparkles}
`;
const brandColor = (accent) => accent === 'orange' ? BRAND_ORANGE : BRAND_NAVY;
const brandTint = (accent) => accent === 'orange' ? 'rgba(241,105,64,0.08)' : 'rgba(51,50,104,0.08)';
const brandRing = (accent) => accent === 'orange' ? 'rgba(241,105,64,0.20)' : 'rgba(51,50,104,0.20)';
// ── Templates ──────────────────────────────────────────────
function statCardHTML(stat, accent) {
const color = brandColor(accent);
const tint = brandTint(accent);
const ring = brandRing(accent);
return `
${svgIcon(stat.icon)}
${stat.value.toLocaleString()}${stat.plus ? '+' : ''}
${stat.label}
`;
}
function badgeHTML(text, color, gradient) {
return `
${text}
`;
}
function mapHTML(map, accent) {
const color = brandColor(accent);
const markers = map.wards.map((w, i) => `
${w.name}
`).join('');
const wardList = map.wards.map(w => `
📍
`).join('');
return `
${map.title}
${map.subtitle}
${map.wards.length} ${map.wards.length === 1 ? 'ward' : 'wards'}
INDIAN OCEAN
DAR ES
SALAAM
N
${markers}
`;
}
function overallPageHTML() {
const stats = generalStats.map((s, i) =>
statCardHTML(s, i % 2 === 0 ? 'navy' : 'orange')).join('');
return `
${badgeHTML(siteCopy.eyebrow, BRAND_ORANGE)}
${siteCopy.headline}
${siteCopy.intro}
${badgeHTML(siteCopy.overall.badge, BRAND_NAVY)}
${siteCopy.overall.title}
${siteCopy.overall.description}
${stats}
`;
}
function programPageHTML(p) {
const color = brandColor(p.accent);
const stats = p.stats.map(s => statCardHTML(s, p.accent)).join('');
return `
${badgeHTML('Program', color)}
${p.name}
· ${p.tagline}
${p.description}
${stats}
${p.map ? mapHTML(p.map, p.accent) : ''}
`;
}
// ── Build pages ────────────────────────────────────────────
const PAGES = [
{ id: 'overall', label: 'Overall Impact', color: BRAND_NAVY, html: overallPageHTML() },
{ id: 'kesho-njema', label: 'Kesho Njema', color: BRAND_NAVY, html: programPageHTML(programs[0]) },
{ id: 'green-frames', label: 'Green Frames', color: BRAND_ORANGE, html: programPageHTML(programs[1]) },
];
const track = document.getElementById('slideTrack');
track.style.width = `${PAGES.length * 100}%`;
track.innerHTML = PAGES.map(p =>
`
${p.html}
`
).join('');
// ── Tabs ───────────────────────────────────────────────────
const tabsEl = document.getElementById('tabs');
tabsEl.innerHTML = PAGES.map((p, i) => `
`).join('');
// ── Dots ───────────────────────────────────────────────────
const dotsEl = document.getElementById('dots');
dotsEl.innerHTML = PAGES.map((p, i) => `
`).join('') + `
`;
// ── Navigation logic ───────────────────────────────────────
let pageIndex = 0;
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
function render() {
const pct = pageIndex * (100 / PAGES.length);
track.style.transform = `translateX(-${pct}%)`;
document.querySelectorAll('.tab').forEach((el, i) => {
const active = i === pageIndex;
el.style.background = active ? PAGES[i].color : 'transparent';
el.style.color = active ? 'white' : PAGES[i].color;
});
document.querySelectorAll('.dot').forEach((el, i) => {
const active = i === pageIndex;
el.style.width = active ? '28px' : '8px';
el.style.background = active ? PAGES[i].color : '#cbd5e1';
});
document.getElementById('pageLabel').textContent =
`${PAGES[pageIndex].label} · ${pageIndex + 1} / ${PAGES.length}`;
prevBtn.disabled = pageIndex === 0;
nextBtn.disabled = pageIndex === PAGES.length - 1;
const nextIdx = Math.min(pageIndex + 1, PAGES.length - 1);
nextBtn.style.background = PAGES[nextIdx].color;
}
function goTo(i) {
pageIndex = Math.max(0, Math.min(PAGES.length - 1, i));
render();
}
prevBtn.onclick = () => goTo(pageIndex - 1);
nextBtn.onclick = () => goTo(pageIndex + 1);
document.querySelectorAll('.tab').forEach(el =>
el.onclick = () => goTo(parseInt(el.dataset.index)));
document.querySelectorAll('.dot').forEach(el =>
el.onclick = () => goTo(parseInt(el.dataset.index)));
// Keyboard arrows
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') goTo(pageIndex + 1);
if (e.key === 'ArrowLeft') goTo(pageIndex - 1);
});
document.getElementById('dateStamp').textContent =
new Date().toLocaleDateString(undefined, { year: 'numeric', month: 'long' });
render();
