feat: add all 5 polish features (stewardship breakdown, tangible impact cards, 1-click check copy, native share, and sticky rebuilding pill)

This commit is contained in:
2026-09-02 15:36:31 -07:00
parent e9b4a0e81e
commit 8fcc825d3b
4 changed files with 594 additions and 3 deletions
+314
View File
@@ -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;
}
}
+107 -1
View File
@@ -244,8 +244,20 @@
<a href="#contact" class="btn btn-outline-white" data-i18n="sb7.transitional_cta">
Download Free Prayer Guide
</a>
<!-- Quick Share Button -->
<button id="btn-share-hero" class="btn btn-outline-white" style="display: inline-flex; align-items: center; gap: 8px;">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
</svg>
<span data-i18n="share.btn">Share Ministry</span>
</button>
</div>
<!-- Quick Stats Tracker -->
<div class="hero-stats">
<div class="stat-item">
@@ -464,12 +476,51 @@
<button class="btn btn-relief btn-full open-donate-modal" data-i18n="donate.btn_give">
Ofrendar / Give to Rebuilding Fund
</button>
</div>
</div>
<!-- Financial Stewardship & Allocation Breakdown (Trust & Transparency) -->
<div class="stewardship-box">
<div class="stewardship-header">
<span class="section-badge badge-gold" data-i18n="steward.badge">FINANCIAL INTEGRITY</span>
<h3 data-i18n="steward.title">How Every Dollar is Allocated</h3>
<p data-i18n="steward.desc">Strict 501(c)(3) accountability through Macedonia World Baptist Missions with 100% field direct deployment.</p>
</div>
<div class="stewardship-bar">
<div class="steward-segment segment-rebuild" style="width: 60%;" title="60% Structural Rebuilding">60%</div>
<div class="steward-segment segment-kitchen" style="width: 25%;" title="25% Food & Water">25%</div>
<div class="steward-segment segment-seminary" style="width: 15%;" title="15% Seminary & Ministry">15%</div>
</div>
<div class="stewardship-legend">
<div class="legend-item">
<span class="legend-dot dot-rebuild"></span>
<div>
<strong data-i18n="steward.l1_title">60% Structural Rebuilding & Roofing</strong>
<p data-i18n="steward.l1_desc">Cement, rebar, fissure reinforcement, earthquake wall ties, and sealing damaged roofs before rains.</p>
</div>
</div>
<div class="legend-item">
<span class="legend-dot dot-kitchen"></span>
<div>
<strong data-i18n="steward.l2_title">25% Daily Food & Clean Water</strong>
<p data-i18n="steward.l2_desc">Rice, black beans, proteins, baby formula, and clean drinking water filtration for 300+ daily meals.</p>
</div>
</div>
<div class="legend-item">
<span class="legend-dot dot-seminary"></span>
<div>
<strong data-i18n="steward.l3_title">15% Seminary & Pastoral Training</strong>
<p data-i18n="steward.l3_desc">Study Bibles, printed course syllabi, classroom equipment, and student pastoral scholarships.</p>
</div>
</div>
</div>
</div>
<!-- Relief Impact Pillars -->
<div class="pillars-grid">
<div class="pillar-card">
<div class="pillar-icon icon-red">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
@@ -553,10 +604,42 @@
</p>
</div>
<!-- Tangible Impact Metric Cards (Click to Give) -->
<div class="impact-cards-grid">
<div class="impact-metric-card" data-amount="25">
<span class="impact-metric-amount">$25</span>
<span class="impact-metric-title" data-i18n="impact.c1_title">25 Hot Meals</span>
<p class="impact-metric-desc" data-i18n="impact.c1_desc">Feeds hungry neighborhood children and elderly with a hot, nutritious meal and clean water.</p>
<span class="impact-metric-action" data-i18n="impact.btn_select">Give this amount ➔</span>
</div>
<div class="impact-metric-card" data-amount="100">
<span class="impact-metric-amount">$100</span>
<span class="impact-metric-title" data-i18n="impact.c2_title">1 Support Pillar</span>
<p class="impact-metric-desc" data-i18n="impact.c2_desc">Supplies structural steel ties and high-grade mortar to repair shear cracks in the sanctuary.</p>
<span class="impact-metric-action" data-i18n="impact.btn_select">Give this amount ➔</span>
</div>
<div class="impact-metric-card" data-amount="250">
<span class="impact-metric-amount">$250</span>
<span class="impact-metric-title" data-i18n="impact.c3_title">1 Seminary Semester</span>
<p class="impact-metric-desc" data-i18n="impact.c3_desc">Covers theology books, course materials, and mentorship for a national pastoral candidate.</p>
<span class="impact-metric-action" data-i18n="impact.btn_select">Give this amount ➔</span>
</div>
<div class="impact-metric-card" data-amount="500">
<span class="impact-metric-amount">$1,000</span>
<span class="impact-metric-title" data-i18n="impact.c4_title">Classroom Roof Seal</span>
<p class="impact-metric-desc" data-i18n="impact.c4_desc">Provides waterproof membrane and sealant to protect damaged classroom ceilings.</p>
<span class="impact-metric-action" data-i18n="impact.btn_select">Give this amount ➔</span>
</div>
</div>
<button class="btn btn-primary open-donate-modal" data-i18n="donate.btn_give" style="font-size: 1.1rem; padding: 14px 40px;">
Give Towards This Impact ➔
</button>
<p class="mwbm_verification_note mwbm-verification-note" data-i18n="donate.mwbm_note">
Official Missionary Project: Pastor Victor Paez • Designated Account with Macedonia World Baptist Missions (MWBM).
</p>
@@ -941,8 +1024,17 @@
</li>
<li data-i18n="giving.check_mail">Mail To: P.O. Box 519, Braselton, GA 30517</li>
</ul>
<button id="btn-copy-check" class="btn btn-outline-white btn-sm btn-copy-check" style="margin-top: 14px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--primary-900); border-color: var(--slate-300);">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
<span id="btn-copy-check-text" data-i18n="giving.btn_copy">Copy Mailing Info to Clipboard</span>
</button>
</div>
<!-- Direct / Online Options -->
<div class="channel-card">
<h4 data-i18n="giving.online_title">Direct Online / Card Giving:</h4>
@@ -1308,7 +1400,21 @@
</div>
</footer>
<!-- Global Floating Toast Notification -->
<div id="global-toast" class="toast-notification"></div>
<!-- Sticky Rebuilding Progress Floating Pill -->
<div id="sticky-rebuilding-pill" class="sticky-rebuild-pill">
<div class="sticky-pill-info">
<span class="sticky-pill-title" data-i18n="sticky.title">Caracas Rebuilding Fund</span>
<span class="sticky-pill-sub" data-i18n="sticky.goal">$14,200 of $50k Raised</span>
</div>
<button class="sticky-pill-btn open-donate-modal" data-i18n="sticky.btn">Partner Today ➔</button>
<button id="sticky-pill-close" class="sticky-pill-close" title="Dismiss">&times;</button>
</div>
<script src="js/translations.js"></script>
<script src="js/main.js"></script>
</body>
</html>
+99
View File
@@ -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);
});
+74 -2
View File
@@ -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 ➔"
}
};