JezK
Edit File: main.js
/** * ScrollAR4U Technologies Private Limited * Main Interactive Application Script */ document.addEventListener('DOMContentLoaded', () => { const filterBtns = document.querySelectorAll('.filter-btn'); const projectCards = document.querySelectorAll('.project-card'); const searchInput = document.getElementById('projectSearch'); const resultsCount = document.getElementById('resultsCount'); let activeCategory = 'all'; let searchQuery = ''; // Mobile Navigation Toggle Handler const mobileNavToggle = document.getElementById('mobileNavToggle'); const mobileNavDropdown = document.getElementById('mobileNavDropdown'); const mobileNavLinks = document.querySelectorAll('.mobile-nav-link'); if (mobileNavToggle && mobileNavDropdown) { mobileNavToggle.addEventListener('click', () => { mobileNavDropdown.classList.toggle('active'); const icon = mobileNavToggle.querySelector('i'); if (icon) { if (mobileNavDropdown.classList.contains('active')) { icon.className = 'fa-solid fa-xmark'; } else { icon.className = 'fa-solid fa-bars'; } } }); mobileNavLinks.forEach(link => { link.addEventListener('click', () => { mobileNavDropdown.classList.remove('active'); const icon = mobileNavToggle.querySelector('i'); if (icon) icon.className = 'fa-solid fa-bars'; }); }); } // Filter Projects Function function filterProjects() { let visibleCount = 0; projectCards.forEach(card => { const category = card.getAttribute('data-category'); const title = card.querySelector('.project-card-title')?.textContent.toLowerCase() || ''; const desc = card.querySelector('.project-card-desc')?.textContent.toLowerCase() || ''; const tags = Array.from(card.querySelectorAll('.tech-tag')).map(t => t.textContent.toLowerCase()).join(' '); const matchesCategory = (activeCategory === 'all' || category === activeCategory); const matchesSearch = !searchQuery || title.includes(searchQuery) || desc.includes(searchQuery) || tags.includes(searchQuery); if (matchesCategory && matchesSearch) { card.style.display = 'flex'; visibleCount++; } else { card.style.display = 'none'; } }); if (resultsCount) { resultsCount.textContent = `Showing ${visibleCount} of ${projectCards.length} Projects`; } } // Filter Buttons Click Listener filterBtns.forEach(btn => { btn.addEventListener('click', () => { filterBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); activeCategory = btn.getAttribute('data-filter'); filterProjects(); }); }); // Search Input Listener if (searchInput) { searchInput.addEventListener('input', (e) => { searchQuery = e.target.value.toLowerCase().trim(); filterProjects(); }); } // Modal Technical Spec Drawer const modalOverlay = document.getElementById('projectModal'); const modalCloseBtn = document.getElementById('modalCloseBtn'); const modalTitle = document.getElementById('modalTitle'); const modalCategory = document.getElementById('modalCategory'); const modalImg = document.getElementById('modalImg'); const modalProblem = document.getElementById('modalProblem'); const modalSolution = document.getElementById('modalSolution'); const modalMetrics = document.getElementById('modalMetrics'); const modalStack = document.getElementById('modalStack'); const modalLiveBtn = document.getElementById('modalLiveBtn'); function openProjectModal(p) { if (!p || !p.title) return; if (modalTitle) modalTitle.textContent = p.title; if (modalCategory) modalCategory.textContent = p.category_label || 'Enterprise Deliverable'; if (modalImg) modalImg.src = p.thumbnail || ''; if (modalProblem) modalProblem.textContent = p.problem_statement || 'N/A'; if (modalSolution) modalSolution.textContent = p.tech_solution || 'N/A'; if (modalMetrics) modalMetrics.textContent = p.metrics || 'High-Availability System'; if (modalStack) { modalStack.innerHTML = (p.tech_stack || []).map(t => `<span class="tech-tag">${t}</span>`).join(' '); } if (modalLiveBtn) { if (p.url) { modalLiveBtn.href = p.url; modalLiveBtn.style.display = 'inline-flex'; modalLiveBtn.target = '_blank'; } else { modalLiveBtn.style.display = 'none'; } } if (modalOverlay) modalOverlay.classList.add('open'); } document.querySelectorAll('[data-project]').forEach(card => { card.addEventListener('click', (e) => { // Don't trigger modal if user explicitly clicked the external website link if (e.target.closest('.external-link')) { return; } try { const p = JSON.parse(card.getAttribute('data-project') || '{}'); openProjectModal(p); } catch (err) { console.error('Error parsing project data', err); } }); }); if (modalCloseBtn) { modalCloseBtn.addEventListener('click', () => { if (modalOverlay) modalOverlay.classList.remove('open'); }); } if (modalOverlay) { modalOverlay.addEventListener('click', (e) => { if (e.target === modalOverlay) { modalOverlay.classList.remove('open'); } }); } // Form AJAX Handler (RFP Lead Form) const rfpForm = document.getElementById('rfpForm'); const rfpStatus = document.getElementById('rfpStatus'); if (rfpForm) { rfpForm.addEventListener('submit', async (e) => { e.preventDefault(); const submitBtn = rfpForm.querySelector('button[type="submit"]'); const originalText = submitBtn.textContent; submitBtn.disabled = true; submitBtn.textContent = 'Submitting Request...'; const formData = new FormData(rfpForm); const data = Object.fromEntries(formData.entries()); try { const response = await fetch('api/rfp_submit.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); const result = await response.json(); if (result.success) { rfpStatus.innerHTML = ` <div style="padding: 16px; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 8px; color: #15803D; margin-top: 16px;"> <strong><i class="fa-solid fa-circle-check" style="margin-right: 6px;"></i>Technical Request Logged [Ref ID: ${result.lead_id}]</strong><br> ${result.message} </div> `; rfpForm.reset(); } else { rfpStatus.innerHTML = ` <div style="padding: 16px; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px; color: #B91C1C; margin-top: 16px;"> <strong><i class="fa-solid fa-triangle-exclamation" style="margin-right: 6px;"></i>Submission Error</strong><br> ${result.message || 'Unable to submit request.'} </div> `; } } catch (err) { rfpStatus.innerHTML = ` <div style="padding: 16px; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px; color: #B91C1C; margin-top: 16px;"> <strong><i class="fa-solid fa-triangle-exclamation" style="margin-right: 6px;"></i>Network Error</strong><br> Could not connect to lead server. Please try again. </div> `; } finally { submitBtn.disabled = false; submitBtn.textContent = originalText; } }); } });