feat: complete bilingual website for Pastor Victor Páez Venezuela church and earthquake rebuilding fund with Donald Miller SB7 framework

js/main.js

@@ -0,0 +1,192 @@
+// Main Controller - Language Switcher, Donation Calculator, Modal & Interactions
+document.addEventListener('DOMContentLoaded', () => {
+  let currentLang = localStorage.getItem('vpaez_lang') || 'en';
+
+  // DOM Elements
+  const langEnBtn = document.getElementById('lang-en');
+  const langEsBtn = document.getElementById('lang-es');
+  const mobileToggle = document.getElementById('mobile-toggle');
+  const navLinks = document.getElementById('nav-links');
+  const donateModal = document.getElementById('donate-modal');
+  const modalClose = document.getElementById('modal-close');
+  const modalSelectedTier = document.getElementById('modal-selected-tier');
+  const contactForm = document.getElementById('contact-form');
+  const formSuccess = document.getElementById('form-success');
+
+  // Donation Tier Data
+  const tierImpacts = {
+    "25": {
+      en: "Provides 1 full week of clean drinking water and food staples for an earthquake-affected family in Caracas.",
+      es: "Provee 1 semana completa de agua potable y alimentos básicos para una familia afectada por el terremoto en Caracas."
+    },
+    "50": {
+      en: "Funds emergency medical supplies, vitamins, and hot meals served directly at our community soup kitchen.",
+      es: "Financia insumos médicos de emergencia, vitaminas y comidas calientes servidas en nuestro comedor comunitario."
+    },
+    "100": {
+      en: "Helps rebuild and furnish one student study desk and station in the damaged Seminario Bautista de Venezuela.",
+      es: "Ayuda a reconstruir y amoblar un pupitre de estudio en el Seminario Bautista de Venezuela dañado."
+    },
+    "250": {
+      en: "Sponsors masonry reconstruction, mortar, and structural beam reinforcement in the church sanctuary.",
+      es: "Patrocina la reconstrucción de albañilería, cemento y refuerzo de vigas estructurales del santuario."
+    },
+    "500": {
+      en: "Major structural restoration grant for roof sealing, electrical grid repair, and broad community distribution.",
+      es: "Subvención mayor para impermeabilización de techos, red eléctrica y ayuda comunitaria a gran escala."
+    }
+  };
+
+  let selectedAmount = "100";
+
+  // Function: Set Language
+  function setLanguage(lang) {
+    if (!translations[lang]) return;
+    currentLang = lang;
+    localStorage.setItem('vpaez_lang', lang);
+
+    // Update buttons active class
+    if (langEnBtn && langEsBtn) {
+      langEnBtn.classList.toggle('active', lang === 'en');
+      langEsBtn.classList.toggle('active', lang === 'es');
+    }
+
+    // Update text elements with data-i18n
+    document.querySelectorAll('[data-i18n]').forEach(el => {
+      const key = el.getAttribute('data-i18n');
+      if (translations[lang][key]) {
+        el.textContent = translations[lang][key];
+      }
+    });
+
+    // Update placeholder attributes
+    document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+      const key = el.getAttribute('data-i18n-placeholder');
+      if (translations[lang][key]) {
+        el.setAttribute('placeholder', translations[lang][key]);
+      }
+    });
+
+    // Update HTML elements
+    document.querySelectorAll('[data-i18n-html]').forEach(el => {
+      const key = el.getAttribute('data-i18n-html');
+      if (translations[lang][key]) {
+        el.innerHTML = translations[lang][key];
+      }
+    });
+
+    // Update Donation Tier Impact text
+    updateTierDisplay(selectedAmount);
+
+    // Update document language attribute
+    document.documentElement.lang = lang;
+  }
+
+  // Update Tier Display
+  function updateTierDisplay(amount) {
+    selectedAmount = amount;
+    const impactEl = document.getElementById('tier-impact-text');
+    if (impactEl && tierImpacts[amount]) {
+      impactEl.textContent = tierImpacts[amount][currentLang];
+    }
+    if (modalSelectedTier) {
+      modalSelectedTier.textContent = `$${amount} USD`;
+    }
+  }
+
+  // Event Listeners for Language Switcher
+  if (langEnBtn) {
+    langEnBtn.addEventListener('click', () => setLanguage('en'));
+  }
+  if (langEsBtn) {
+    langEsBtn.addEventListener('click', () => setLanguage('es'));
+  }
+
+  // Tier Chips Interaction
+  const tierChips = document.querySelectorAll('.tier-chip');
+  tierChips.forEach(chip => {
+    chip.addEventListener('click', () => {
+      tierChips.forEach(c => c.classList.remove('active'));
+      chip.classList.add('active');
+      const amount = chip.getAttribute('data-amount');
+      updateTierDisplay(amount);
+    });
+  });
+
+  // Modal Open / Close Logic
+  function openModal() {
+    if (donateModal) {
+      donateModal.classList.add('active');
+      document.body.style.overflow = 'hidden';
+    }
+  }
+
+  function closeModal() {
+    if (donateModal) {
+      donateModal.classList.remove('active');
+      document.body.style.overflow = '';
+    }
+  }
+
+  // Trigger modal on buttons with class .open-donate-modal
+  document.querySelectorAll('.open-donate-modal').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
+      openModal();
+    });
+  });
+
+  if (modalClose) {
+    modalClose.addEventListener('click', closeModal);
+  }
+
+  if (donateModal) {
+    donateModal.addEventListener('click', (e) => {
+      if (e.target === donateModal) {
+        closeModal();
+      }
+    });
+  }
+
+  // Mobile Menu Toggle
+  if (mobileToggle && navLinks) {
+    mobileToggle.addEventListener('click', () => {
+      navLinks.classList.toggle('open');
+      mobileToggle.textContent = navLinks.classList.contains('open') ? '✕' : '☰';
+    });
+
+    // Close mobile nav when link clicked
+    navLinks.querySelectorAll('a').forEach(link => {
+      link.addEventListener('click', () => {
+        navLinks.classList.remove('open');
+        mobileToggle.textContent = '☰';
+      });
+    });
+  }
+
+  // Contact Form Submission (Simulated Client-Side)
+  if (contactForm) {
+    contactForm.addEventListener('submit', (e) => {
+      e.preventDefault();
+      const submitBtn = contactForm.querySelector('button[type="submit"]');
+      const originalText = submitBtn.textContent;
+      submitBtn.disabled = true;
+      submitBtn.textContent = currentLang === 'es' ? 'Enviando...' : 'Sending...';
+
+      setTimeout(() => {
+        contactForm.reset();
+        submitBtn.disabled = false;
+        submitBtn.textContent = originalText;
+        if (formSuccess) {
+          formSuccess.style.display = 'block';
+          setTimeout(() => {
+            formSuccess.style.display = 'none';
+          }, 6000);
+        }
+      }, 1000);
+    });
+  }
+
+  // Initial Language Load
+  setLanguage(currentLang);
+});