From 8fcc825d3b11eade79425791f5bc34865458459f Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Wed, 2 Sep 2026 15:36:31 -0700 Subject: [PATCH] feat: add all 5 polish features (stewardship breakdown, tangible impact cards, 1-click check copy, native share, and sticky rebuilding pill) --- css/styles.css | 314 +++++++++++++++++++++++++++++++++++++++++++++ index.html | 108 +++++++++++++++- js/main.js | 99 ++++++++++++++ js/translations.js | 76 ++++++++++- 4 files changed, 594 insertions(+), 3 deletions(-) diff --git a/css/styles.css b/css/styles.css index 7a9303e..c7b76f7 100644 --- a/css/styles.css +++ b/css/styles.css @@ -2141,5 +2141,319 @@ button, input, select, textarea { flex-grow: 1; } +/* ========================================================================== + Stewardship Allocation Breakdown + ========================================================================== */ +.stewardship-box { + margin: 40px auto 48px; + max-width: 860px; + background: var(--white); + border: 1px solid var(--slate-200); + border-radius: var(--radius-lg); + padding: 32px 36px; + box-shadow: var(--shadow-sm); + text-align: center; +} + +.stewardship-header h3 { + font-family: var(--font-heading); + font-size: 1.5rem; + color: var(--primary-950); + margin: 8px 0 6px 0; +} + +.stewardship-header p { + color: var(--slate-600); + font-size: 0.94rem; + margin-bottom: 24px; +} + +.stewardship-bar { + display: flex; + height: 28px; + border-radius: var(--radius-full); + overflow: hidden; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); + margin-bottom: 28px; +} + +.steward-segment { + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 0.82rem; + font-weight: 800; + letter-spacing: 0.05em; + transition: opacity 0.2s ease; +} + +.steward-segment:hover { + opacity: 0.9; +} + +.segment-rebuild { + background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%); + color: #0b1528; +} + +.segment-kitchen { + background: linear-gradient(135deg, #059669 0%, #10b981 100%); +} + +.segment-seminary { + background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); +} + +.stewardship-legend { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 20px; + text-align: left; +} + +.legend-item { + display: flex; + gap: 12px; + background: var(--slate-50); + border: 1px solid var(--slate-200); + border-radius: var(--radius-md); + padding: 14px 16px; +} + +.legend-dot { + width: 14px; + height: 14px; + border-radius: 50%; + margin-top: 4px; + flex-shrink: 0; +} + +.dot-rebuild { background: #d4af37; } +.dot-kitchen { background: #10b981; } +.dot-seminary { background: #3b82f6; } + +.legend-item strong { + display: block; + font-size: 0.92rem; + color: var(--primary-950); + margin-bottom: 4px; +} + +.legend-item p { + font-size: 0.82rem; + color: var(--slate-600); + line-height: 1.45; + margin: 0; +} + +/* ========================================================================== + Interactive "See Your Impact" Tangible Cards + ========================================================================== */ +.impact-cards-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 16px; + margin: 28px 0; +} + +.impact-metric-card { + background: var(--slate-50); + border: 1.5px solid var(--slate-200); + border-radius: var(--radius-md); + padding: 20px 16px; + text-align: left; + cursor: pointer; + transition: var(--transition); + display: flex; + flex-direction: column; +} + +.impact-metric-card:hover { + background: var(--white); + border-color: var(--gold-400); + transform: translateY(-3px); + box-shadow: var(--shadow-md); +} + +.impact-metric-amount { + display: inline-block; + font-family: var(--font-heading); + font-size: 1.4rem; + font-weight: 800; + color: var(--primary-900); + margin-bottom: 6px; +} + +.impact-metric-title { + font-size: 0.95rem; + font-weight: 700; + color: var(--slate-900); + margin-bottom: 6px; +} + +.impact-metric-desc { + font-size: 0.82rem; + color: var(--slate-600); + line-height: 1.45; + margin: 0 0 10px 0; + flex-grow: 1; +} + +.impact-metric-action { + font-size: 0.8rem; + font-weight: 700; + color: var(--gold-500, #b45309); + display: flex; + align-items: center; + gap: 4px; +} + +/* ========================================================================== + 1-Click Copy Mailing Info Button & Toast + ========================================================================== */ +.btn-copy-check { + transition: all 0.25s ease; + cursor: pointer; + font-weight: 600; + font-size: 0.88rem; +} + +.btn-copy-check:hover { + background: var(--slate-100); + border-color: var(--slate-400); +} + +.btn-copy-check.copied { + background: #dcfce7 !important; + border-color: #22c55e !important; + color: #15803d !important; +} + +/* Global Floating Toast Notification */ +.toast-notification { + position: fixed; + bottom: 24px; + left: 50%; + transform: translateX(-50%) translateY(100px); + background: #0f172a; + color: #ffffff; + padding: 12px 24px; + border-radius: var(--radius-full); + font-size: 0.92rem; + font-weight: 600; + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); + border: 1px solid rgba(255, 255, 255, 0.15); + display: flex; + align-items: center; + gap: 10px; + z-index: 9999; + opacity: 0; + pointer-events: none; + transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; +} + +.toast-notification.active { + transform: translateX(-50%) translateY(0); + opacity: 1; + pointer-events: auto; +} + +/* ========================================================================== + Sticky Rebuilding Progress Floating Pill + ========================================================================== */ +.sticky-rebuild-pill { + position: fixed; + bottom: 24px; + right: 24px; + background: rgba(10, 22, 51, 0.92); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1.5px solid var(--gold-400); + border-radius: var(--radius-full); + padding: 10px 18px; + box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); + display: flex; + align-items: center; + gap: 14px; + z-index: 999; + transform: translateY(120px); + opacity: 0; + visibility: hidden; + transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.35s; +} + +.sticky-rebuild-pill.visible { + transform: translateY(0); + opacity: 1; + visibility: visible; +} + +.sticky-pill-info { + display: flex; + flex-direction: column; +} + +.sticky-pill-title { + font-size: 0.78rem; + font-weight: 800; + color: var(--white); + letter-spacing: 0.04em; + text-transform: uppercase; +} + +.sticky-pill-sub { + font-size: 0.74rem; + color: var(--gold-300); + font-weight: 700; +} + +.sticky-pill-btn { + background: var(--grad-gold); + color: var(--primary-950); + font-weight: 800; + font-size: 0.82rem; + padding: 7px 16px; + border-radius: var(--radius-full); + border: none; + cursor: pointer; + white-space: nowrap; + transition: transform 0.2s ease, box-shadow 0.2s ease; + display: inline-flex; + align-items: center; + gap: 4px; +} + +.sticky-pill-btn:hover { + transform: scale(1.04); + box-shadow: 0 4px 12px rgba(212, 175, 55, 0.35); +} + +.sticky-pill-close { + background: transparent; + border: none; + color: var(--slate-400); + font-size: 1.1rem; + cursor: pointer; + padding: 2px 4px; + line-height: 1; + transition: color 0.2s; +} + +.sticky-pill-close:hover { + color: var(--white); +} + +@media (max-width: 600px) { + .sticky-rebuild-pill { + right: 12px; + left: 12px; + bottom: 16px; + justify-content: space-between; + padding: 8px 14px; + } +} + + diff --git a/index.html b/index.html index d2dd788..23273a4 100644 --- a/index.html +++ b/index.html @@ -244,8 +244,20 @@ Download Free Prayer Guide + + +
@@ -464,12 +476,51 @@ +
+
+ + +
+
+ FINANCIAL INTEGRITY +

How Every Dollar is Allocated

+

Strict 501(c)(3) accountability through Macedonia World Baptist Missions with 100% field direct deployment.

+
+ +
+
60%
+
25%
+
15%
+
+ +
+
+ +
+ 60% Structural Rebuilding & Roofing +

Cement, rebar, fissure reinforcement, earthquake wall ties, and sealing damaged roofs before rains.

+
+
+
+ +
+ 25% Daily Food & Clean Water +

Rice, black beans, proteins, baby formula, and clean drinking water filtration for 300+ daily meals.

+
+
+
+ +
+ 15% Seminary & Pastoral Training +

Study Bibles, printed course syllabi, classroom equipment, and student pastoral scholarships.

+
+
+
@@ -553,10 +604,42 @@

+ +
+
+ $25 + 25 Hot Meals +

Feeds hungry neighborhood children and elderly with a hot, nutritious meal and clean water.

+ Give this amount ➔ +
+ +
+ $100 + 1 Support Pillar +

Supplies structural steel ties and high-grade mortar to repair shear cracks in the sanctuary.

+ Give this amount ➔ +
+ +
+ $250 + 1 Seminary Semester +

Covers theology books, course materials, and mentorship for a national pastoral candidate.

+ Give this amount ➔ +
+ +
+ $1,000 + Classroom Roof Seal +

Provides waterproof membrane and sealant to protect damaged classroom ceilings.

+ Give this amount ➔ +
+
+ +

Official Missionary Project: Pastor Victor Paez • Designated Account with Macedonia World Baptist Missions (MWBM).

@@ -941,8 +1024,17 @@
  • Mail To: P.O. Box 519, Braselton, GA 30517
    • + +
    +

    Direct Online / Card Giving:

    @@ -1308,7 +1400,21 @@
    + +
    + + +
    +
    + Caracas Rebuilding Fund + $14,200 of $50k Raised +
    + + +
    + + diff --git a/js/main.js b/js/main.js index 35cc341..4c5b49e 100644 --- a/js/main.js +++ b/js/main.js @@ -250,7 +250,106 @@ document.addEventListener('DOMContentLoaded', () => { }); } + // Global Floating Toast + function showToast(message) { + const toast = document.getElementById('global-toast'); + if (!toast) return; + toast.textContent = message; + toast.classList.add('active'); + setTimeout(() => { + toast.classList.remove('active'); + }, 3500); + } + + // 1-Click Copy Mailing Info + const btnCopyCheck = document.getElementById('btn-copy-check'); + const btnCopyText = document.getElementById('btn-copy-check-text'); + if (btnCopyCheck) { + btnCopyCheck.addEventListener('click', () => { + const checkInfo = "Payee: Macedonia World Baptist Missions, Inc.\nMemo: Pastor Victor Paez — Venezuela Rebuilding Fund\nMail to: P.O. Box 519, Braselton, GA 30517"; + navigator.clipboard.writeText(checkInfo).then(() => { + btnCopyCheck.classList.add('copied'); + if (btnCopyText && translations[currentLang]) { + btnCopyText.textContent = translations[currentLang]['giving.copied'] || 'Copied to Clipboard! ✓'; + } + showToast(translations[currentLang]['giving.copied'] || 'Copied to Clipboard! ✓'); + setTimeout(() => { + btnCopyCheck.classList.remove('copied'); + if (btnCopyText && translations[currentLang]) { + btnCopyText.textContent = translations[currentLang]['giving.btn_copy'] || 'Copy Mailing Info to Clipboard'; + } + }, 3000); + }); + }); + } + + // Interactive Impact Metric Cards + const impactMetricCards = document.querySelectorAll('.impact-metric-card'); + impactMetricCards.forEach(card => { + card.addEventListener('click', () => { + const amount = card.getAttribute('data-amount'); + if (amount) { + updateTierDisplay(amount); + const targetChip = document.querySelector(`.tier-chip[data-amount="${amount}"]`); + if (targetChip) { + document.querySelectorAll('.tier-chip').forEach(c => c.classList.remove('active')); + targetChip.classList.add('active'); + } + openModal(); + } + }); + }); + + // Native Mobile 1-Tap Share Button + const btnShareHero = document.getElementById('btn-share-hero'); + if (btnShareHero) { + btnShareHero.addEventListener('click', async (e) => { + e.preventDefault(); + const shareData = { + title: currentLang === 'es' ? 'Pastor Víctor Páez — Iglesia Bíblica Bautista Caracas' : 'Pastor Víctor Páez — Caracas, Venezuela Rebuilding Mission', + text: currentLang === 'es' ? 'Apoye la reconstrucción y el ministerio del evangelio en Caracas, Venezuela.' : 'Preaching Christ, training pastors, and rebuilding hope in Caracas, Venezuela.', + url: 'https://ibbcaracas.org/' + }; + if (navigator.share) { + try { + await navigator.share(shareData); + } catch (err) { + // User closed share sheet + } + } else { + navigator.clipboard.writeText('https://ibbcaracas.org/').then(() => { + showToast(translations[currentLang]['share.copied'] || 'Website link copied to clipboard! ✓'); + }); + } + }); + } + + // Sticky Rebuilding Progress Floating Pill + const stickyPill = document.getElementById('sticky-rebuilding-pill'); + const stickyPillClose = document.getElementById('sticky-pill-close'); + let pillDismissed = false; + + if (stickyPill) { + window.addEventListener('scroll', () => { + if (pillDismissed) return; + if (window.scrollY > 500) { + stickyPill.classList.add('visible'); + } else { + stickyPill.classList.remove('visible'); + } + }, { passive: true }); + + if (stickyPillClose) { + stickyPillClose.addEventListener('click', (e) => { + e.stopPropagation(); + pillDismissed = true; + stickyPill.classList.remove('visible'); + }); + } + } + // Initial Language Load setLanguage(currentLang); }); + diff --git a/js/translations.js b/js/translations.js index ffea5ee..b79cf20 100644 --- a/js/translations.js +++ b/js/translations.js @@ -280,12 +280,48 @@ const translations = { "sponsor.t2_desc": "Provides clean water, beans, rice, and proteins for over 150 hot meals served to neighborhood children and elderly.", "sponsor.t3_title": "Church Planter Fellowship", "sponsor.t3_desc": "Provides full missionary support for a Venezuelan seminary graduate pioneering a new church plant in an unreached region.", - "sponsor.btn_sponsor": "Sponsor Tier ➔" + "sponsor.btn_sponsor": "Sponsor Tier ➔", + + // 1-Click Copy Mailing Info + "giving.btn_copy": "Copy Mailing Info to Clipboard", + "giving.copied": "Copied to Clipboard! ✓", + + // Stewardship Breakdown + "steward.badge": "FINANCIAL INTEGRITY", + "steward.title": "How Every Dollar is Allocated", + "steward.desc": "Strict 501(c)(3) accountability through Macedonia World Baptist Missions with 100% field direct deployment.", + "steward.l1_title": "60% Structural Rebuilding & Roofing", + "steward.l1_desc": "Cement, rebar, fissure reinforcement, earthquake wall ties, and sealing damaged roofs before rains.", + "steward.l2_title": "25% Daily Food & Clean Water", + "steward.l2_desc": "Rice, black beans, proteins, baby formula, and clean drinking water filtration for 300+ daily meals.", + "steward.l3_title": "15% Seminary & Pastoral Training", + "steward.l3_desc": "Study Bibles, printed course syllabi, classroom equipment, and student pastoral scholarships.", + + // Tangible Impact Cards + "impact.title": "Tangible Impact of Your Gift", + "impact.subtitle": "Every contribution directly transforms lives and repairs God's house in Caracas.", + "impact.c1_title": "25 Hot Meals", + "impact.c1_desc": "Feeds hungry neighborhood children and elderly with a hot, nutritious meal and clean water.", + "impact.c2_title": "1 Support Pillar", + "impact.c2_desc": "Supplies structural steel ties and high-grade mortar to repair shear cracks in the sanctuary.", + "impact.c3_title": "1 Seminary Semester", + "impact.c3_desc": "Covers theology books, course materials, and mentorship for a national pastoral candidate.", + "impact.c4_title": "Classroom Roof Seal", + "impact.c4_desc": "Provides waterproof membrane and sealant to protect damaged classroom ceilings.", + "impact.btn_select": "Give this amount ➔", + + // Native Share & Sticky Pill + "share.btn": "Share Ministry", + "share.copied": "Website link copied to clipboard! ✓", + "sticky.title": "Caracas Rebuilding Fund", + "sticky.goal": "$14,200 of $50k Raised", + "sticky.btn": "Partner Today ➔" }, + es: { // Header & Nav "nav.brand_title": "Iglesia Bíblica Bautista", @@ -565,10 +601,46 @@ const translations = { "sponsor.t2_desc": "Provee agua limpia, granos, arroz y proteínas para más de 150 comidas calientes servidas a niños y ancianos necesitados.", "sponsor.t3_title": "Beca de Plantación de Iglesias", "sponsor.t3_desc": "Provee sustento misionero completo para un graduado del seminario que emprende la plantación de una nueva iglesia nacional.", - "sponsor.btn_sponsor": "Patrocinar Pilar ➔" + "sponsor.btn_sponsor": "Patrocinar Pilar ➔", + + // 1-Click Copy Mailing Info - Spanish + "giving.btn_copy": "Copiar Datos de Envío al Portapapeles", + "giving.copied": "¡Copiado al Portapapeles! ✓", + + // Stewardship Breakdown - Spanish + "steward.badge": "INTEGRIDAD FINANCIERA", + "steward.title": "Cómo se Distribuye Cada Dólar", + "steward.desc": "Rendición de cuentas bajo 501(c)(3) con despliegue directo en el campo a través de Macedonia World Baptist Missions.", + "steward.l1_title": "60% Reconstrucción Estructural y Techos", + "steward.l1_desc": "Cemento, cabillas, refuerzo de grietas sísmicas y sellado de techos antes de las lluvias.", + "steward.l2_title": "25% Alimento Diario y Agua Potable", + "steward.l2_desc": "Arroz, granos, proteínas, fórmulas y filtración de agua para más de 300 comidas calientes al día.", + "steward.l3_title": "15% Seminario y Formación Pastoral", + "steward.l3_desc": "Biblias de estudio, manuales teológicos, recursos de biblioteca y becas de transporte estudiantil.", + + // Tangible Impact Cards - Spanish + "impact.title": "Impacto Tangible de su Ofrenda", + "impact.subtitle": "Cada contribución transforma vidas y repara la casa de Dios en Caracas.", + "impact.c1_title": "25 Comidas Calientes", + "impact.c1_desc": "Alimenta a niños y ancianos del sector con un plato caliente y nutritivo, más agua limpia.", + "impact.c2_title": "1 Columna Reforzada", + "impact.c2_desc": "Provee amarres de acero y mortero estructural para reparar fisuras en el santuario.", + "impact.c3_title": "1 Semestre de Seminario", + "impact.c3_desc": "Cubre libros de teología, materiales y mentoría pastoral para un seminarista nacional.", + "impact.c4_title": "Sellado de Techo del Seminario", + "impact.c4_desc": "Provee membrana impermeabilizante y sellador para proteger las aulas afectadas.", + "impact.btn_select": "Ofrendar este monto ➔", + + // Native Share & Sticky Pill - Spanish + "share.btn": "Compartir Ministerio", + "share.copied": "¡Enlace copiado al portapapeles! ✓", + "sticky.title": "Fondo de Reconstrucción", + "sticky.goal": "$14,200 de $50k Recaudados", + "sticky.btn": "Ofrendar Hoy ➔" } }; +