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
+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>